Co to jest właściwość z-index w CSS?

Kaskadowe arkusze stylów (CSS) zapewnia ogromny zakres właściwości, które określają, w jaki sposób elementy HTML pojawią się na stronach internetowych, na przykład właściwość wyświetlania określa zachowanie wyświetlania elementów, właściwość pozycji określa pozycję elementów, właściwość koloru tła zapewnia tło tło kolor do elementów, a lista jest długa. Ten zapis został specjalnie zaprojektowany w celu podkreślenia znaczenia właściwości Z-Index w CSS.

W HTML elementy mają pewną kolejność układania, która określa układ, w którym elementy są ustawione. Zasada zdefiniowana dla pozycjonowania elementów jest taka, że ​​element, który ma wyższą kolejność układania, jest umieszczona przed elementem o niższej kolejności układania. Kolejność stosu elementu może wykazywać zarówno wartości dodatnie, jak i ujemne.

Co to jest właściwość z-index w CSS

Właściwość Z-Index definiuje kolejność stosu elementów HTML w sposób, który określa, który element będzie wyświetlany z przodu, a który element jest wyświetlany na tle.

Składnia

z-indeksu: wartość;

Właściwość Z-Index może wykazywać określone szczegółowo nieruchomości, które są szczegółowo wyjaśnione.

Wartość	Opis
automatyczny	Ta wartość określa kolejność stosu elementów równa wartości ich elementów nadrzędnych.
numer	Ta wartość służy do ręcznego podawania elementu kolejności stosu. Kolejność stosu może wykazywać zarówno wartości dodatnie, jak i ujemne.
wstępny	Ta wartość ustawia kolejność stosu elementu na jego wartość domyślną.
dziedziczyć	Ta wartość ustawia kolejność stosu elementu zgodnie z właściwościami, które element odziedziczył po elemencie nadrzędnym.

Tutaj zilustrowaliśmy właściwość Z-Index za pomocą niektórych przykładów.

Przykład 1

Załóżmy, że chcesz podać obraz w tle na swojej stronie i chcesz, aby inne elementy były wyświetlane przed tym obrazem. Użyj następującego fragmentu kodu.

Html

Morning Walk jest korzystny dla zdrowia

W powyższym przykładzie istnieją dwa elementy jeden to

element i drugi to element.

CSS

H2
Pozycja: względny;
po lewej: 200px;
TOP: 0px;

img
z -index: -1;
Pozycja: absolutna;
po lewej: 200px;
TOP: 0px;

Element jest umieszczony w tle

element, ponieważ właściwość z -index przypisana do elementu wynosi -1. Ponadto

Element jest stosunkowo ustawiony 200px od lewej i 0px od góry, podczas gdy element ma bezwzględną pozycję, co oznacza, że ​​zostanie umieszczony 200px od lewej i 0px od góry, w odniesieniu do pozycji jego elementu przodka .

Wyjście

Oto wyjście z powyższego przykładu.

Oba elementy pomyślnie ułożone.

Teraz, jeśli usuniemy wartość indeksu Z z elementu, zostanie umieszczony przed

element, ponieważ jest zdefiniowany ostatni w przepływie dokumentu.

img
/*z -index: -1;*/
Pozycja: absolutna;
po lewej: 200px;
TOP: 0px;

Wyjście

Teraz

Element jest umieszczony za elementem.

Przykład 2

W tym przykładzie wykazaliśmy użycie pozytywnej wartości indeksu Z, w tym przykładzie zilustrowaliśmy, jak umieścić element za pewnym elementem. Tutaj tworzone są dwa elementy.

Html

Div 1
Div 2

Pierwsza Div ma względną pozycję, co oznacza, że ​​zostanie ustawiona 20px od lewej i 10px od góry w stosunku do jego pierwotnej pozycji, co więcej, przypisaliśmy jej wartość indeksu Z 1.

.div1
z-index: 1;
Pozycja: względny;
Po lewej: 20px;
TOP: 10px;
granica: 3px stały szary;
Wysokość: 100px;
szerokość: 300px;

Dla drugiej div przypisaliśmy go bezwzględną pozycją, co oznacza, że ​​zostanie umieszczona 100px od lewej i 60 px od góry w odniesieniu do pozycji jego elementu nadrzędnego.

.div2
Pozycja: absolutna;
po lewej: 100px;
TOP: 60px;
kolor tła: Indianred;
Wysokość: 80px;
szerokość: 200px;

Wyjście

Div 2 z powodzeniem ułożone za Div 1.

Punkty do zapamiętania!

1. Musisz zdefiniować pozycję elementów, w przeciwnym razie właściwość Z-Index nie będzie działać. (Elementy mogą mieć pozycje bezwzględne, względne, ustalone lub lepkie).

2. Bez określenia właściwości z-index, jeśli dwa elementy okrążają się nad sobą, wówczas element zdefiniowany ostatnio w przepływie dokumentu jest ustawiony przed drugim elementem.

Wniosek

Właściwość Z-Index służy do ustawienia kolejności układania elementów HTML, co oznacza, że ​​określa układ elementów wyświetlany na stronie internetowej. Właściwość Z-Index wykazuje cztery wartości; Auto, który ustawia kolejność elementów stosu równa ich elementom macierzystym, liczba jest używana do ręcznego podawania kolejności stosu elementowi, początkowa ustawia kolejność stosu elementu na jego domyślną wartość i odziedzicza kolejność stosu w stosunku element zgodnie z właściwościami, które element odziedziczył po jego elemencie nadrzędnym. W tym poście omawia właściwość Z-Index dogłębnie za pomocą odpowiednich przykładów.