Co to jest z-index?
W CSS, z-index to właściwość, która określa kolejność nakładania się elementów na osi Z, czyli w trzecim wymiarze. Jest to szczególnie przydatne, gdy mamy do czynienia z elementami, które nakładają się na siebie, i chcemy kontrolować, który z nich będzie widoczny na wierzchu. Wartość z-index może być dodatnia, ujemna lub równa zero.
Jak działa z-index?
Właściwość z-index działa tylko na elementach, które mają ustawioną właściwość position na relative, absolute, fixed lub sticky. Elementy z position: static nie reagują na z-index. Wartości z-index są porównywane w kontekście ich rodziców, co oznacza, że elementy w różnych kontekstach z-index nie wpływają na siebie nawzajem.
Przykład użycia z-index
Rozważmy prosty przykład, w którym mamy trzy elementy nakładające się na siebie:
Przykład z-index
.box {
width: 100px;
height: 100px;
position: absolute;
}
.box1 {
background-color: red;
z-index: 1;
top: 50px;
left: 50px;
}
.box2 {
background-color: green;
z-index: 2;
top: 70px;
left: 70px;
}
.box3 {
background-color: blue;
z-index: 3;
top: 90px;
left: 90px;
}
W powyższym przykładzie mamy trzy elementy o różnych kolorach i różnych wartościach z-index. Element z najwyższą wartością z-index (niebieski) będzie na wierzchu, a element z najniższą wartością (czerwony) będzie na spodzie.
Konflikty z-index i ich rozwiązywanie
W praktyce mogą wystąpić sytuacje, w których elementy mają takie same wartości z-index. W takich przypadkach przeglądarka decyduje o kolejności na podstawie kolejności w kodzie HTML. Elementy, które pojawiają się później w kodzie, będą na wierzchu.
Przykład konfliktu z-index
Rozważmy sytuację, w której dwa elementy mają tę samą wartość z-index:
Konflikt z-index
.box {
width: 100px;
height: 100px;
position: absolute;
}
.box1 {
background-color: red;
z-index: 1;
top: 50px;
left: 50px;
}
.box2 {
background-color: green;
z-index: 1;
top: 70px;
left: 70px;
}
W tym przypadku zielony element będzie na wierzchu, ponieważ pojawia się później w kodzie HTML.
Praktyczne zastosowania z-index
Właściwość z-index jest szeroko stosowana w różnych scenariuszach, takich jak:
- Tworzenie menu rozwijanych
- Tworzenie modalnych okienek
- Tworzenie efektów parallax
- Tworzenie złożonych układów graficznych
Przykład zastosowania w menu rozwijanym
Menu rozwijane często korzystają z z-index, aby zapewnić, że podmenu są wyświetlane na wierzchu innych elementów:
Menu rozwijane
.menu {
position: relative;
}
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 10;
}
.menu:hover .submenu {
display: block;
}
W tym przykładzie podmenu jest wyświetlane na wierzchu innych elementów dzięki wysokiej wartości z-index.
Podsumowanie
Właściwość z-index w CSS jest potężnym narzędziem do kontrolowania kolejności nakładania się elementów na osi Z. Dzięki niej możemy tworzyć złożone układy graficzne, menu rozwijane, modalne okienka i wiele innych interaktywnych elementów. Kluczowe jest zrozumienie, że z-index działa tylko na elementach z ustawioną właściwością position inną niż static. Warto również pamiętać o potencjalnych konfliktach z-index i sposobach ich rozwiązywania.
