Czym jest właściwość z-index w CSS i jak się jej używa?
Właściwość z-index w CSS służy do określania kolejności warstw elementów, które się nakładają. Jest szczególnie przydatna przy układaniu elementów jeden na drugim, na przykład gdy mamy okno dialogowe modalne pojawiające się nad stroną.
Podstawowe użycie
Właściwość z-index można stosować tylko do elementów, które mają ustawioną właściwość position na absolute, relative, fixed lub sticky. Jeśli z-index nie jest określony, elementy będą układać się zgodnie z kolejnością w dokumencie.
Oto prosty przykład:
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .box1 { position: absolute; left: 50px; top: 50px; width: 100px; height: 100px; background-color: red; z-index: 1; } .box2 { position: absolute; left: 70px; top: 70px; width: 100px; height: 100px; background-color: blue; z-index: 2; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
W tym przykładzie .box2 pojawi się na wierzchu .box1 ponieważ ma wyższą wartość z-index.
Uwagi
- Domyślny
z-index: Jeśliz-indexnie jest ustawiony, kolejność warstw jest określana przez kolejność elementów w HTML. - Ujemny
z-index: Można użyć wartości ujemnych, aby umieścić element za jego elementem nadrzędnym lub sąsiednimi. - Ten sam
z-index: Gdy elementy mają ten samz-index, będą się układać w kolejności, w jakiej pojawiają się w HTML.
Typowe pułapki
- Tylko elementy z ustawioną właściwością
position(absolute,relative,fixed,sticky) mogą mieć zastosowanyz-index. - Wartości
z-indexmają wpływ tylko w kontekście układania swojego rodzica.
Efektywne wykorzystanie z-index może pomóc w tworzeniu atrakcyjnych interfejsów poprzez kontrolowane układanie zawartości warstwami.
