CSS - Pozycjonowanie elementów

Właściwości pozycjonowania pozwalają na precyzyjne określenie miejsca na stronie, w ktorym dany element ma być wyświetlany. Elementy mogą być rozmieszczane w relacji względem swojej normalnej pozycji, absolutnie względem elementu nadrzędnego, jak również posiadać pozycję ustaloną względem okna przeglądarki.

Zobacz:


Metody pozycjonowania - position

Pozycję elementu można określić za pomocą właściwości position. Możliwe jest ustalenie pozycji w relacji do poprzedzającego elementu, pozycji absolutnej względem elementu przodka lub pozycji ustalonej względem okna przeglądarki.

position: static | relative | absolute | fixed | initial | inherit ;

Wartości właściwości position:

Wartość Opis
static Elementy ładowane są w takim porządku, jak wynika to z układu w dokumencie. Właściwości top, right, bottom, left nie mają tutaj zastosowania.
Wartość domyślna.
relative Element jest umieszczany względem swojego normalnego położenia. Na przykład określając właściwość top na 10 pikseli, element zostanie umieszczony w pozycji przesuniętej o 10 pikseli w dół względem normalnego położenia.
absolute Element jest umieszczany w pozycji absolutnej, określanej względem pierwszego elementu przodka, posiadającego inną metodę pozycjonowania, niż static.
fixed Element jest umieszczany względem okna przeglądarki.
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przesunięcia pudełka - top, right, bottom, left

Właściwości top, right, bottom, left pozwalają na określenie przesunięcia pudełka o wskazane wartości. W zależności od wybranej metody pozycjonowania oraz rodzaju wartości, odnoszą się one do krawędzi elementu pozycjonowanego, elementu nadrzędnego lub krawędzi okna przeglądarki.

top: auto | rozmiar | procent | initial | inherit ;
right: auto | rozmiar | procent | initial | inherit ;
bottom: auto | rozmiar | procent | initial | inherit ;
left: auto | rozmiar | procent | initial | inherit ;

Przesunięcie pudełka zazwyczaj określa się w odniesieniu do narożników elementu. Oznacza to, że do określenia przesunięcia stosuje się pary właściwości:

  • top, left
  • top, right
  • bottom, left
  • bottom, right

W przypadku gdy któraś z właściwości zostanie pominięta, zostanie dla niej zastosowana wartość domyślna.

Wartości właściwości top, right, bottom, left:

Wartość Opis
auto Wartość jest określona na podstawie normalnej pozycji elementu.
Wartość domyślna. 
rozmiar Określa rozmiar przesunięcia w jednostkach długości (px, pt, em, itd.). Na przykład 15px.
procent Określa rozmiar przesunięcia w procentach szerokości lub wysokości elementu rodzica. Na przykład 10%.
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Pozycjonowanie względne

Element pozycjonowany względnie jest umieszczany w swojej pozycji w układzie normalnym, a następnie przesuwany względem tej pozycji.

Za pomocą właściwości top, right, bottom, left określa się o jaką wartość zostanie przesunięty element względem normalnej pozycji. Przesunięcie następuje względem krawędzi pozycjonowanego pudełka. Tak więc zastosowanie na przykład właściwości left z dodatnią wartością bezwzględną, doda do lewej krawędzi pudełka margines o podanej wartości. Zastosowanie właściwości left z ujemną wartością bezwzględną, doda do lewej krawędzi margines ujemny, czyli przesunie całe pudełko w lewo o podaną wartość.

Przykład:

<h3 class="first">Ten blok treści jest umieszczony w swojej normalnej pozycji.</h3>
<h3 class="second">Ten blok treści jest przesunięty względem normalnej pozycji o 30 pikseli dodanych do lewej pozycji elementu.</h3>
h3.first {
   position: relative;
   top: 0;
   left: 0;
}
	 
h3.second {
   position: relative;
   top: 0;
   left: 30px;
}

Pozycjonowanie bezwzględne

Element pozycjonowany bezwzględnie jest umieszczany w pozycji określonej przez właściwości przesuwające (top, right, bottom, left), względem pierwszego elementu nadrzędnego, który ma przypisaną właściwość position z inną wartością niż static.

Brak określenia właściwości position (z wartością inną niż static), w elementach nadrzędnych elementu pozycjonowanego, spowoduje że element ten będzie pozycjonowany względem elementu body. Określenie w przynajmniej jedym elemencie nadrzędnym właściwości position, spowoduje że pozycja elementu zostanie obliczona względem tego elementu.

Przykład:

<div class="box-rel">
   <div class="box-abs">
      Ten blok treści jest umieszczony względem bloku nadrzędnego, ponieważ ma on przypisaną wartość relative właściwości position.
   </div>
</div>
div.box-rel {
   position: relative;
   height: 200px;
}

div.box-abs {
   position: absolute;
   top: 25px;
   left: -25px;
}

Pozycjonowanie ustalone

Element posiadający ustaloną pozycję jest pozycjonowany względem okna przeglądarki i zachowuje swoją pozycję w trakcie przewijania strony.

Przykład:

<div class="fixed">Ten blok treści jest ustawiony w pozycji ustalonej względem okna przeglądarki.</div>
div.fixed {
   position: fixed;
   top: 25px;
   right: 25px;
   width: 100px;
   background: #eeeeee;
}

Praktycznym przykładem elementu posiadającego ustaloną pozycję jest przycisk "do góry", znajdujący się w prawym dolnym rogu ekranu tej witryny.


Kolejność nakładania warstw - z-index

Korzystanie z właściwości position i przesunięć elementów względem układu normalnego, pociaga za sobą konieczność określenia kolejności ich nakładania. Związane jest to z faktem, że przemieszczenie elementu w inne miejsce, niż wynika to z normalnego układu, powodowuje iż elementy następujące, mogą go częściowo lub w pełni zasłonić.

Kolejność występowania elementów w dokumencie, w układzie normalnym, jest wytyczną dla przeglądarki jak elementy te mają być ustawione. Inaczej jest w przypadku elementów pozycjonowanych z przesunięciami, gdzie kolejność nakładania warstw można wymusić przy użyciu właściwości z-index. Dzięki tej właściwości, możliwe jest nakazanie przeglądarce, aby element występujący wcześniej w dokumencie, nakładał się na element występujący w tym dokumencie później.

z-index: auto | liczba | initial | inherit ;

Wartości właściwości z-index:

Wartość Opis
auto Ustawia kolejność w stosie równą pozycji rodzica.
Wartość domyślna.
liczba Ustawia liczbę wykorzystywaną do obliczenia, jak elementy mają być ułożone w stosie.
Wartościami są liczby całkowite. Liczby mogą być ujemne.
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

<div class="first">Ten blok treści występuje w dokumencie jako pierwszy, ale dzięki właściwości z-index, jest nakładany na element następujący po nim.</div>
<div class="second">Ten blok treści występuje w dokumencie jako drugi, ale umieszczany jest pod elementem poprzedzającym.</div>
div.first {
   position: relative;
   top: 0;
   left: 0;
   z-index: 2;
}

div.second {
   position: relative;
   top: -25px;
   left: 250px;
   z-index: 1;
}

Właściwości pozycjonowania

Właściwość Opis CSS
position Określa metodę pozycjonowania elementu. 2
top Ustawia margines górnej krawędzi elementu w obszarze pozycjonowania. 2
right Ustawia margines prawej krawędzi elementu w obszarze pozycjonowania. 2
bottom Ustawia margines dolnej krawędzi elementu w obszarze pozycjonowania. 2
left Ustawia margines lewej krawędzi elementu w obszarze pozycjonowania. 2
z-index Określa kolejność nakładania warst przez przeglądarkę podczas ładowania dokumentu. 2