Our website use cookies

Do you like cookies as much as we do? We use them to provide the best experience. By continuing to use our website, you agree to our cookies policy.
Logo Devbrains

Pozycjonowanie elementów za pomocą z-index

3 min

Artykuł ten powstał w celu podszkolenia swojej wiedzy z zakresu pozycjonowania elementów za pomocą CSS3 na stronie internetowej.

Czytając tego posta dowiesz się:

  • - w jakiej kolejności malowane są elementy
  • - jakie znaczenie ma pozycja elementu (position)
  • - informacje na temat kontekstu stosu
  • - jak poprawnie pozycjonować elementy

HTML i

Malowanie elementów

Gdy przeglądarka przetwarza kod HTML do postaci modelu DOM(link) tworzy strukturę drzewa, która nazywana jest drzewem renderowania. Reprezentuje ono stronę wizualną i położenie każdego elementu. Drzewo odpowiada również za kolejność w jakiej malowane(renderowane) będą elementy. Kolejność ta jest bardzo istotna. Element malowany później będzie wyświetlony nad tym, który był malowany wcześniej.

<div class="container">  
   <div style="position: static;" class="element-1">pierwszy</div>
   <div style="position: static;" class="element-2">drugi</div>
   <div style="position: static;" class="element-3">trzeci</div>
 </div>

W momencie, kiedy dodane zostanie pozycjonowanie sprawy zaczynają wyglądać nieco inaczej. Przeglądarka wyświetla najpierw elementy bez pozycjonowania, a następnie elementy pozycjonowane. Domyślnie każdy pozycjonowany element pojawi się wyżej w hierarchii nad pozostałymi elementami

Dodanie elementów pozycjonowanych

<div class="container">
   <div style="position: relative;" class="element-1">pierwszy</div>
   <div style="position: relative;" class="element-2">drugi</div>
   <div style="position: static;" class="element-3">trzeci</div>
 </div>

Drugi element jest wciąż pozycjonowany nad pierwszym, ponieważ elementy przesuwane zostały przeniesione do przodu kontekstu kolejki, ale nie zmieniło się ich wzajemnie ułożenie zależne od kolejności określonej w kodzie źródłowym.

Dlatego ważne jest aby kontrolować zachowanie elementów na stosie za pomocą z-index

Elementy z większą wartością właściwości z-index pojawią się nad elementami z mniejszą wartością. Elementy z ujemną wartością pojawią się pod elementami statycznymi.

Właściwość z-index wydaje się być prosta, niestety posiada ona pewne ograniczenia. Po pierwsze można ją ustawiać jedynie na elementach pozycjonowanych. Nie można modyfikować kolejności na stosie elementów statycznych. Po drugie zastosowanie właściwości z-index na elemencie pozycjonowanym spowoduje utworzenie czegoś, co jest nazywane kontekstem stosu.

Kontekst stosu tworzony jest przez element lub grupę elementów wyświetlanych razem przez przeglądarkę. W momencie dodania wartości z-index do elementu pozycjonowanego staje się on elementem głównym nowego kontekstu stosu. Wszystkie elementy podrzędne tego elementu są częścią tego kontekstu stosu.

Jeśli element byłby umiejscowiony nad kontekstem stosu, wtedy żaden element w jego obrębie nie mógłby zostać umiejscowiony nad tym elementem

Podobnie, jeżeli element na stronie umieszczono pod kontekstem stosu, żaden element w jego obrębie (w środku) nie może zostać umiejscowiony nad tym elementem

Pozycjonowanie elementów

<div class="container">
   <div style="position: relative; z-index: 1" class="element-1">
     <p>pierwszy</p>
     <p>z-index: 1</p>
     <div style="position: relative; z-index: 5" class="element-4">
       <p>czwarty</p>
       <p>z-index: 5</p>
     </div>
   </div>
   <div style="position: relative; z-index: 2" class="element-2">
     <p>drugi</p>
     <p>z-index: 2</p>
   </div>
   <div style="position: static" class="element-3">trzeci</div>
 </div>
  • z index kontroluje pozycję elementu w obrębie jego kontekstu stosu

    Istnieją również inne właściwości, które powoduje utworzenie się kontekstu stosu:

    • opacity
    • transform
    • filter
    • i pare innych

    Sam tag tworzy kontekst najwyższego poziomu dla całej strony

  • kolejność ułożenia elementów w obrębie kontekstu stosu (od góry):

    • pozycjonowane z właściwością z-index dodatnią
    • pozycjonowane z właściwością z-index ustawioną na auto
    • nie pozycjonowane
    • pozycjonowane z właściwością z-index ujemną
    • główny element kontekstu stosu - np.

Gdy kiedykolwiek stwierdzisz, że z-index nie działa tak jakbyś chciał, przeszukaj drzewo modelu DOM aż nie znajdziesz elementu głównego kontekstu stosu

Dzięki, że przeczytałeś mojego pierwszego posta!

Logo Devbrains

Efficient and professional application development which will boost your business.

DEVBRAINS
CONTACT
All rights reserved DEVBRAINS 2020