Live
x
<html> <head> <title>z-index</title> <style> p, code { display: block; margin: 5px; text-align: center; } /* W naszym przykładzie mamy trzy "grupy", tworzone przez trzy główne tagi <section>. Każdy z tych tagów jest pozycjonowany. Grupy te są dla siebie "rodzeństwem" */ .group { position: relative; display: inline-block; margin: 5px; width: 200px; border: 1px solid black; background-color: aliceblue; /* Lekka przeźroczystość pozwoli nam zobaczyć niżej położone elementy. */ opacity: 94%; } /* Każda z grup posiada inną wartość z-index */ .group-1 { /* Grupa 1 posiada najniższą wartość "z-index" równy "1", ale równie dobrze mógłby on być równy zero lub w ogóle nie być ustawiony. Efekt będzie ten sam. */ z-index: 1; } /* Grupa druga (środkowa) posiada najwyższą wartość z-index */ .group-2 { z-index: 3; } .group-3 { z-index: 2; text-align: right; } /* Dla łatwego rozróżnienia, "dzieci" każdej z grup posiadają inny kolor */ .group-1 div { background-color: lavenderblush; } .group-2 div { background-color: lightcyan; } .group-3 div { background-color: lightyellow; } /* Każdy pojedynczy element w grupie jest pozycjonowany i posiada różne wartości z-index. Wartości te są podane bezpośrednio na znacznikach. */ .item { position: relative; display: inline-block; width: 70%; height: 100px; padding: 20px 20px 0 20px; margin: 5px 10px; border: 1px solid navy; box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2); } </style> </head> <body> <h1>z-index i <i>Stacking context</i></h1> <!-- Grupa 1 posiada najniższy z-index ze swojego rodzeństawa a więc nie ważne jak wysokie będą z-indexy "dzieci" tej grupy, i tak będą one najniżej ze względu na niski z-index rodzica. --> <section class="group group-1"> <p>Grupa 1 <i>rodzic</i></p> <code>z-index: 1</code> <!-- Element ten jest poniżej pozostałych elementów, ponieważ element poniżej ma ten sam z-index, ale jest dalej w drzewie HTML, natomaist element po prawej znajduje się w grupie, która posiada wyższy z-index, więc nie ma znaczenia to, że on sam ma wyższy z-index niż element który jest "wizualnie" nad nim. --> <div class="item" style="z-index: 1; top: 20px; right: 20px"> z-index: 1 </div> <!-- Ponownie kolejność warstw jest zdeterminowana przez "z-index" rodziców. Sam element wewnątrz swojej grupy jest poniżej elementu o wyższym "z-index" i powyżej elementu o tym samym "z-index", ale występującym wcześniej w drzewie HTML. --> <div class="item" style="z-index: 1"> z-index: 1 </div> <!-- Element o bardzo wysokim "z-index" jest przykryty przez całą grupę nr 2. Ponownie, wszystko za sprawą tego, ze cała grupa nr 2 ma wyższy "z-index" niż grupa nr 1 --> <div class="item" style="z-index: 100; left: 100px; bottom: 30px"> z-index: 100 </div> </section> <!-- Grupa 2 ma najwyższy z-index z całego rodzeństwa, więc sama grupa (znacznik "rodzica") jak i wszystkie jej "dzieci" będą zawsze na wierzchu. --> <section class="group group-2"> <p>Grupa 2 <i>rodzic</i></p> <code>z-index: 3</code> <div class="item" style="z-index: 0; right: 100px; top: 30px"> z-index: 0 </div> <div class="item" style="z-index: 20"> z-index: 20 </div> <div class="item" style="z-index: 30; left: 100px; bottom: 60px"> z-index: 30 </div> </section> <!-- Grupa 3 - Czy potrafisz już sam wyjaśnić czemu dany element jest nisko/wysoko? 🙂 --> <section class="group group-3"> <p>Grupa 3 <i>rodzic</i></p> <code>z-index: 2</code> <div class="item" style="z-index: 3"> z-index: 3 </div> <div class="item" style="z-index: 2; right: 70px; bottom: 30px"> z-index: 2 </div> <div class="item" style="z-index: 100"> z-index: 100 </div> </section> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.