Autor publikacji: Virtual Patriot - Administrator

Pozycja statyczna, relatywna, absolutna oraz ustalona

Data publikacji: Wrzesień 01 2013
Ostatnio edytowano: Wrzesień 07 2020

W tej części kursu CSS poznamy w jaki sposób sprawić, aby element HTML przestał być elementem statycznym, a stał się elementem wyświetlonym w pozycji relatywnej, absolutnej lub ustalonej. Inaczej mówiąc poznamy do czego służy właściwość position.

W realnym świecie, gdy układamy jedną kartkę papieru na drugiej kartce papieru, gdy powtarzamy tą czynność z kilkoma kartkami papieru, to tworzymy stos z kartek papieru ułożonych na sobie nawzajem.

W świecie wirtualnym, gdy umieszczamy jeden element HTML w drugim, gdy powtarzamy tą czynność z kilkoma elementami HTML, to tworzy się coś, co moglibyśmy nazwać "stosem elementów HTML".

Przyjrzyjmy się następującemu dokumentowi HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        text-align:center;
        padding:30px;
        border:2px dashed black;
      }

      div {
        line-height:60px;
        background-color:white;
      }

      #rodzic {
        padding:30px;
        border:2px dashed red;
      }

      #dziecko1 {
        border:1px dashed blue;
        margin-bottom:15px;
      }

      #dziecko2 {
        border:1px dashed blue;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      <div id="dziecko1">to jest pierwszy element - div</div>
      <div id="dziecko2">to jest drugi przykładowy element - div</div>
    </div>

  </body>
</html>

A o to rezultat jaki ujrzymy:

to jest pierwszy element - div

to jest drugi przykładowy element - div

W przykładzie zaprezentowanym powyżej, do elementu body został dodany element div, do którego z kolei zostały dodane kolejne dwa elementy div. Do niektórych elementów zostały dodane marginesy wewnętrzne padding oraz różne obramowanie border. Do wszystkich elementów div został dodany biały kolor tła background-color:white; oraz wartość wysokości wierszy line-height:60px; a do elementu div#dziecko1 dodatkowo został dodany dolny margines zewnętrzny margin-bottom:15px; dzięki czemu element div#dziecko2 został odsunięty o 15 pikseli od elementu div#dziecko1.

Gdy przyjrzymy się naszym elementom HTML nieco bardziej, to możemy stwierdzić, że elementy HTML umieszczone jeden w drugim, tworzą stos, czyli po wyświetleniu w oknie przeglądarki internetowej są ułożone jeden na drugim.

Jeżeli nadal tego nie zauważasz, to spójrz jak będą wyglądać nasze elementy HTML, gdy dodamy do nich pomocniczy cień:

to jest pierwszy element - div

to jest drugi przykładowy element - div

W naszym układzie elementów HTML, obramowanie koloru czarnego określa granice elementu html, czyli granice przestrzeni w jakiej ten element został wyświetlony, w oknie przeglądarki internetowej. Obramowanie koloru czerwonego określa granice elementu #rodzic, natomiast obramowanie koloru niebieskiego określa granice elementu #dziecko1 oraz elementu #dziecko2.

Domyślnie, elementy HTML są wyświetlone w pozycji statycznej, co oznacza, że nie możemy zmienić ich pozycji początkowej. Aby zmienić pozycję początkową elementu HTML, wykorzystuje się do tego celu następujące właściwości CSS:

top - odsunięcie od góry
right - odsunięcie od prawej
bottom - odsunięcie od dołu
left - odsunięcie od lewej

Jednak aby wyżej wymienione właściwości CSS mogły przesunąć dany element HTML, nie może on być wyświetlony w domyślnej pozycji statycznej.

Do zmiany pozycji, w jakiej ma być wyświetlony element HTML, wykorzystuje się właściwość position oraz jedną z następujących wartości:

relative - pozycja relatywna
absolute - pozycja absolutna
fixed - pozycja ustalona

Na początek zajmiemy się pozycją relatywną.

Spójrzmy co się stanie z naszym układem elementów HTML, gdy do elementu #rodzic zostanie dodana właściwość position:relative; oraz właściwość right:100px;

#rodzic {
  border:2px dashed red;
  position:relative;
  right:100px;
}

Rezultat:

element - #rodzic - position:relative; right:100px;

to jest pierwszy element - div

to jest drugi przykładowy element - div

Do elementu #rodzic została dodana właściwość position:relative; dzięki czemu ten element HTML stał się elementem wyświetlonym w pozycji relatywnej. Pozycję takiego elementu relatywnego możemy kontrolować za pomocą właściwości top, right, bottom, left, co zostało już wcześniej wspomniane. W naszym przypadku element #rodzic (oraz jego cała zawartość) został odsunięty od prawej strony o 100 pikseli, ponieważ do wspomnianego elementu została dodana właściwość right:100px;

W ten sam sposób możemy odsunąć każdy inny element HTML, który jest wyświetlony w pozycji innej niż domyślna pozycja statyczna. Spójrzmy na następujący przykład:

element - #dziecko1 - position:relative; top:-50px; left:40px;

to jest drugi przykładowy element - div

Tym razem do elementu #dziecko1 została dodana właściwość position:relative; top:-50px; oraz left:40px; dzięki czemu wspomniany element HTML został przysunięty do góry o 50 pikseli (minusowe wartości przysuwają, dodatnie wartości odsuwają) oraz został odsunięty od lewej strony o 40 pikseli.

Gdy element HTML będzie wyświetlony w pozycji innej niż statyczna, czyli w pozycji relative, absolute lub fixed, to nie będzie on wpływał, po przesunięciu go, na położenie sąsiednich elementów HTML, tzn. nie będzie on odsuwał ich od siebie.

Jeżeli chodzi o nasz ostatni przykład i o element HTML wyświetlony w pozycji relatywnej, czyli w pozycji relative, to mimo tego, że został on odsunięty od swojej pozycji początkowej, to element występujący pod nim, czyli drugi element div, pozostał na swoim miejscu, ponieważ po elemencie wyświetlonym w pozycji relatywnej pozostaje pusta przestrzeń takich samych rozmiarów jaką zajmowałby dany element HTML wyświetlony w domyślnej pozycji statycznej.

Dla ułatwienia zrozumienia zależności, która została opisana w ostatnim akapicie, poniżej został zaprezentowany ten sam przykład, lecz z zaznaczoną pozycją początkową elementu #dziecko1.

pozycja początkowa

element - #dziecko1

to jest drugi przykładowy element - div

Wspomniana zależność nie występuje w momencie gdy zmienimy pozycję elementu HTML na pozycję absolutną lub ustaloną.

Spójrzmy co się stanie z naszym przykładowym elementem #dziecko1, gdy dodamy do niego właściwość position:absolute;

#dziecko1 {
  border:1px dashed blue;
  margin-bottom:15px;
  position:absolute;
}

Rezultat:

element - #dziecko1 - position:absolute;

to jest drugi przykładowy element - div

Domyślnie, element HTML, do którego zostanie dodana właściwość position:absolute; nie pozostawia po sobie żadnej dodatkowej przestrzeni, dzięki czemu elementy, które go otaczały, nie reagują w żaden sposób na niego oraz na jego pozycję początkową.

Domyślnie, element wyświetlony z pozycji absolutnej będzie znajdował się w miejscu swojej pozycji początkowej, chyba że zmienimy to za pomocą właściwości CSS, które służą do ustalenia pozycji takiego elementu HTML, czyli za pomocą właściwości top, right, bottom lub left.

Domyślnie, pozycja elementu absolutnego będzie liczona względem krawędzi okna naszej przeglądarki internetowej. Możemy zauważyć tą zależność, gdy dodamy do naszego przykładowego elementu #dziecko1 następujące właściwości CSS:

#dziecko1 {
  border:1px dashed blue;
  margin-bottom:15px;
  position:absolute;
  top:0;
  left:0;
}

Rezultat:

element - #dziecko1 - position:absolute; top:0; left:0;

to jest drugi przykładowy element - div

Jak widzimy w przykładzie zaprezentowanym powyżej, pierwszy element div został przesunięty do lewej krawędzi okna przeglądarki internetowej, ponieważ do wspomnianego elementu div została dodana właściwość left:0;. Nasz element div został również przesunięty do górnej krawędzi okna przeglądarki internetowej, ponieważ do wspomnianego elementu div została dodana właściwość top:0;

Jeżeli dodamy do naszego przykładowego elementu div, który jest wyświetlony w pozycji absolutnej, marginesy zewnętrzne, np. margin:15px; to wspomniany element div zostanie odsunięty od krawędzi okna przeglądarki internetowej o wartość tych marginesów zewnętrznych, czyli o wartość równą 15 pikseli.

Przykład:

element - #dziecko1

to jest drugi przykładowy element - div

Domyślnie, szerokość elementu pozycjonowanego absolutnie, czyli takiego elementu HTML, do którego została dodana właściwość position:absolute; jest uzależniona od zawartości jaka w tym elemencie zostanie umieszczona.

Jeżeli chcemy, aby szerokość elementu pozycjonowanego absolutnie zajmowała całą szerokość okna naszej przeglądarki internetowej, to do takiego elementu pozycjonowanego absolutnie należy dodać właściwość width:100%; natomiast sam element pozycjonowany absolutnie musi być ustawiony w lewym górnym rogu okna przeglądarki oraz nie może posiadać w sobie takich właściwości CSS jak: margin, padding, border, po swojej prawej lub lewej stronie.

#dziecko1 {
  position:absolute;
  width:100%;
  top:0;
  left:0;
}

Rezultat:

element - #dziecko1 - position:absolute; top:0; left:0; width:100%;

to jest drugi przykładowy element - div

Jeżeli chcielibyśmy, aby nasz przykładowy element div, pozycjonowany absolutnie, zajmował całą wysokość naszego okna przeglądarki internetowej, to do wspomnianego elementu div należy dodać właściwość height:100%;

Aby efekt był widoczny, nasz przykładowy element div nie może posiadać w sobie takich właściwości CSS jak: margin, padding, border, po swojej górnej lub dolnej stronie.

Rezultat:

element - #dziecko1 - position:absolute; top:0; left:0; width:100%; height:100%;

to jest drugi przykładowy element - div

Jeżeli nie chcemy, aby nasz przykładowy element div, pozycjonowany absolutnie, zajmował całej szerokości okna naszej przeglądarki internetowej, a mimo to był wyśrodkowany, to należy ustalić, dla wspomnianego elementu div, jakąś wartość właściwości width, która odpowiada za szerokość elementu HTML.

Wartość ta powinna być wyrażona w procentach, np. width:60%; dzięki czemu będziemy wiedzieli ile % brakuje do wartości 100%, czyli 100% - 60% = 40%. Dzieląc wartość 40% na 2, otrzymamy wartość jaką należy użyć wraz z właściwością left, dzięki czemu nasz omawiany element HTML pozycjonowany absolutnie, zostanie wyśrodkowany w oknie naszej przeglądarki internetowej, jak ten element, który został zaprezentowany w przykładzie umieszczonym poniżej:

element - #dziecko1 - position:absolute; width:60%; top:0; left:20%;

to jest drugi przykładowy element - div

Element div#dziecko1 został ustawiony na środku, ponieważ został on odsunięty od lewej krawędzi okna przeglądarki internetowej o wartość 20%, natomiast jego szerokość wynosi 60%, czyli przestrzeń jaka zostaje po prawej stronie, wspomnianego elementu div#dziecko1, wynosi 20%. Wszystkie wartości w sumie dają 100%.

Inny ciekawy efekt uzyskamy, gdy do naszego przykładowego elementu div, pozycjonowanego absolutnie, dodamy następujące właściwości CSS:

#dziecko1 {
  border:1px dashed blue;
  position:absolute;
  top:20px;
  right:20px;
  bottom:20px;
  left:20px;
}

Rezultat:

element - #dziecko1 - position:absolute; top:20px; right:20px; bottom:20px; left:20px;

to jest drugi przykładowy element - div

Tym razem nasz przykładowy element div, pozycjonowany absolutnie, został rozciągnięty do każdej krawędzi okna przeglądarki internetowej. Przestrzeń, jaka pozostała między krawędziami przeglądarki internetowej, a wspomnianym elementem div, wynosi 20px, po każdej stronie.

Do tej pory pozycja naszego przykładowego elementu div, pozycjonowanego absolutnie, była liczona względem krawędzi okna przeglądarki internetowej, jednak tą zależność możemy zmienić. Aby to uczynić, musimy dodać właściwość position:relative; lub position:absolute; lub position:fixed; do któregoś z przodków wspomnianego elementu div, dzięki czemu pozycja naszego przykładowego elementu div, pozycjonowanego absolutnie, będzie liczona względem pierwszego elementu przodka pozycjonowanego relatywnie lub pozycjonowanego absolutnie lub wyświetlonego w pozycji ustalonej, czyli tego, który będzie posiadał w sobie właściwość position:relative; lub position:absolute; lub position:fixed; a nie względem krawędzi okna przeglądarki internetowej.

#rodzic {
  border:2px dashed red;
  position:relative;
}

#dziecko1 {
  border:1px dashed blue;
  position:absolute;
  bottom:0;
  right:0;
}

Rezultat:

element - #rodzic - position:relative;

element - #dziecko1 - position:absolute; bottom:0; right:0;

to jest drugi przykładowy element - div

W przykładzie przedstawionym powyżej, element #dziecko1, który jest pozycjonowany absolutnie, został przesunięty do prawej oraz dolnej krawędzi elementu #rodzic, a nie do prawej oraz dolnej krawędzi okna przeglądarki internetowej, ponieważ do wspomnianego elementu #rodzic została dodana właściwość position:relative;

Do omówienia została nam ostatnia możliwa pozycja, w jakiej może być wyświetlony element HTML, za pomocą właściwości position. Tą pozycją jest pozycja ustalona, czyli position:fixed;

Element wyświetlony w pozycji fixed zachowuje się podobnie jak element HTML, który jest wyświetlony w pozycji absolute, lecz jego pozycja zawsze jest liczona względem okna przeglądarki internetowej, a sam element wyświetlony w pozycji fixed zawsze znajduje się w tym samym miejscu, w oknie naszej przeglądarki internetowej, nawet jeżeli będziemy przesuwać nasze okno przeglądarki internetowej, np. za pomocą poziomego lub pionowego suwaka. Ponadto w "normalnych" okolicznościach, gdy umieścimy jakiś element HTML poza prawą krawędzią lub dolną krawędzią okna naszej przeglądarki internetowej, np. za pomocą właściwości top, right, bottom, left oraz wartości ujemnych, np. -30px, to do okna naszej przeglądarki internetowej zostaną dodane poziome bądź pionowe suwaki, które służą do przewijania niemieszczącej się zawartości, która pojawiła się w oknie przeglądarki internetowej, lecz opisana sytuacja nie będzie miała miejsca, gdy elementem, który został umieszczony poza granicami okna przeglądarki internetowej, jest element wyświetlony w pozycji fixed.

Przykład elementu wyświetlonego w pozycji fixed możemy zobaczyć tutaj (w lewym górnym rogu okna Twojej przeglądarki internetowej).

W tej części kursu CSS zostały zaprezentowane elementy HTML, które były wyświetlane w różnych dostępnych pozycjach. Wspomniane elementy HTML posiadają między sobą wiele różnych zależności, które mogą wydać się skomplikowane (przynajmniej na samym początku nauki języka CSS), dlatego w wielu miejscach działu czwartego będą Ci one pokrótce przypominane.

W następnej części kursu CSS poznamy sposób na zmianę kolejności, w jakiej są widziane przez nas elementy wyświetlane w pozycji relative, absolute lub fixed.