Właściwość indeksu z CSS
Przykład
Ustaw indeks Z dla obrazu:
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Definicja i użycie
Właściwość z-index
określa kolejność stosu elementu.
Element o większej kolejności stosu zawsze znajduje się przed elementem o niższym porządku stosu.
Uwaga: z-index
działa tylko na elementach pozycjonowanych (pozycja: bezwzględna, pozycja: względna, pozycja: stała lub pozycja: przyklejona) i elementy flex (elementy, które są bezpośrednimi dziećmi elementów
display:flex ).
Uwaga: Jeśli dwa pozycjonowane elementy nakładają się na siebie bez z-index
określonego elementu, element pozycjonowany jako ostatni w kodzie HTML zostanie wyświetlony na górze.
Domyślna wartość: | automatyczny |
---|---|
Dziedziczny: | nie |
Animowalny: | tak. Przeczytaj o animacji |
Wersja: | CSS2 |
Składnia JavaScript: | obiekt .style.zIndex="-1" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Property | |||||
---|---|---|---|---|---|
z-index | 1.0 | 4.0 | 3.0 | 1.0 | 4.0 |
Składnia CSS
z-index: auto|number|initial|inherit;
Wartości nieruchomości
Value | Description | Play it |
---|---|---|
auto | Sets the stack order equal to its parents. This is default | |
number | Sets the stack order of the element. Negative numbers are allowed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Powiązane strony
Samouczek CSS: Pozycjonowanie CSS
Dokumentacja HTML DOM:
właściwość zIndex