Dlaczego Z-Index nie działa

CSS „z-index”Określa kolejność układania elementu HTML. Wraz ze wzrostem wartości zostanie umieszczony przed innymi elementami. Domyślnie każdy element na stronie internetowej ma statycznie zdefiniowaną pozycję. Jednak „indeks z” działa tylko na pozycjonowanych elementach.

Ten zapis poprowadzi Cię przez możliwe rozwiązanie problemu Z-Index, który nie działa:

• Ustawienie pozycji elementu.
• Elementy o tej samej wartości indeksu Z będą się układać w kolejności wyglądu.
• Ustawianie poziomu układania elementu dziecka w stosunku do jego rodzica.

Warunek: Utwórz stronę HTML

W HTML zrób cztery „„Pojemniki. Najpierw dodaj tag „” i przypisz klasę „Main-1„Do tego. Wewnątrz dodaj troje elementów „” dzieci z klasami ”Sub-Main-1”,„Sub-Main-2", I "Sub-Main-3”:

rodzic
1
2
3

W CSS stygnij elementy „”, aby zmienić swoje kształty.

Style „Main-1”

.Main-1
szerokość: 150px;
Wysokość: 150px;
kolor tła: bisque;
Margines: 50px Auto;
Pozycja: względny;

Tutaj:

• "szerokość”Określa szerokość elementu.
• "wysokość”Ustawia wysokość elementu.
• "kolor tła”Stosuje kolor tła elementu.
• "margines”Dodaje przestrzeń wokół elementu.
• "pozycja”Z wartością„względny”Umieszcza element w stosunku do jego obecnej pozycji.

Stylowa klasa „Sub-Main-1”

„„Sub-Main-1„Klasa jest stylizowana z następującymi właściwościami, aby zrobić pudełko 1:

.sub-goin-1
szerokość: 150px;
Wysokość: 150px;
kolor tła: kadetblue;
Pozycja: absolutna;
TOP: 30px;
Po lewej: 20px;

Tutaj:

• "pozycja”Z wartością„absolutny”Pozycjonuje element zgodnie z jego elementem ustawionym nadrzędnym.
• "szczyt" I "lewy”Są wykorzystywane do dodawania przestrzeni u góry elementu i lewej.

Stylowa klasa „sub-Main-2”

W ramach pudełka 2 zastosowano następujące style:

.Sub-Main-2
szerokość: 150px;
Wysokość: 150px;
kolor tła: RGB (223, 134, 186);
Pozycja: absolutna;
TOP: 60px;
po lewej: 50px;

Style klasa „sub-Main-3”

Do Make Box 3 stosuje się następujące właściwości CSS: Make Box 3:

.sub-main-3
szerokość: 150px;
Wysokość: 150px;
kolor tła: RGB (210, 243, 186);
Pozycja: absolutna;
TOP: 90px;
po lewej: 80px;

Cztery pudełka zostały pomyślnie utworzone i są w naturalnej kolejności układania:

Ustawienie pozycji elementu

Ważną rzeczą do rozważenia jest to, że „z-index„Nieruchomość działa tylko z pozycjonowanymi elementami. Dodaj właściwość „z-index” o dowolnej wartości, takiej jak „1". Więc jeśli usuniemy „pozycja„Nieruchomość z„Sub-Main-2„Klasa,„z-index„Nieruchomość nie zadziała:

Elementy o tej samej wartości indeksu Z będą się układać w kolejności wyglądu

Jeśli wszystkie elementy są dostosowywane o to samo „z-index„Wartość, wszyscy będą się układać w kolejności wyglądu. Dlatego zwiększ wartość właściwości „z-index” elementu, który chcesz wyświetlić przed wszystkimi.

Zaimplementujmy to za pomocą przykładu:

Rodzic 1
dziecko 1
Dziecko 2

W CSS przypisz każdą klasę właściwością „z-index” o wartości „1”. Strona internetowa będzie wyglądać tak:

Ustawianie poziomu układania elementu dziecka w stosunku do jego rodzica

Dzieci stosu elementu nadrzędnego w stosunku do jego elementu nadrzędnego. Nie wpłyną one na kolejność układania drugiego elementu rodzeństwa.

Aby uzyskać dobre zrozumienie, przeanalizuj poniższy przykład.

Utwórz plik HTML

• Najpierw dodaj „„Element dla nadrzędnego 1 i przypisz go klasę„Main-1".
• Wewnątrz dodaj elementy „” dla dzieci dziecka 1, dziecku 2 i warstwy modalnej.
• Na końcu dodaj element „” dla rodzica 2:

Rodzic 1
dziecko 1
Dziecko 2


Rodzic 2

Ustaw "Main-1" klasa "z-index„Wartość jako„2”:

z-index: 2;

Stylowa klasa „Modalna”

.Dziecko-współczynnik
Pozycja: Naprawiono;
TOP: 0px;
po lewej: 0px;
szerokość: 100%;
Wysokość: 100 VH;
z-indeksu: 100;
kolor tła: RGBA (0, 0, 0, 0.295);

„„Modalny dzieci„Class”z-index„Wartość jest ustalana jako„100”, Co oznacza, że ​​musi być przed elementami rodzeństwa.

Ustaw "z-index„Wartość„Sub-Main-2" klasa "5”:

z-indeksu: 5;

Ustaw "z-index„Wartość„Main-2" klasa "3”:

z-index: 3;

Z poniższego obrazu możemy zaobserwować, że rodzeństwo „Main-2„Elementu nadrzędnego znajduje się przed„Main-1„Rodzic, chociaż jeden z elementów dziecięcych ma większe”z-index" wartość. Wynika to z faktu, że klasa „Main-1” ma wartość właściwości „z-index” „2”, a „Main-2” ma wartość „z-index” „3”:

To są powody, dla których z-index nie działa.

Wniosek

„„z-index„Nieruchomość działa na pozycjonowanych elementach, takich jak elementy„ mające „pozycja" nieruchomość "absolutny”,„naprawił", albo więcej. Jeśli wartość „z-indeksu” elementu nadrzędnego jest mniejsza niż jego element rodzeństwa, a dziecko byłego elementu macierzystego ma większą wartość „indeksu”, element nadrzędny rodzeństwa wyświetli się przed wszystkimi. W tym spisie omówiono właściwość „indeksu” i dlaczego nie działa.