Podcast CSS – 019: konteksty z-index i układania
.
Załóżmy, że mamy kilka elementów, które są absolutnie rozmieszczone, i muszą być na siebie nałożone. Możesz napisać taki fragment kodu HTML:
<div class="stacked-items">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
</div>
Który jednak domyślnie znajduje się na drugim? Aby dowiedzieć się, który element może to zrobić, musisz zrozumieć konteksty z-index i stosów.
Kolejność nakładania elementów
z-index
określa kolejność warstw HTML w oparciu o przestrzeń 3D przeglądarki – oś Z.
Ta oś pokazuje, które warstwy znajdują się bliżej Ciebie, a które dalej.
Oś pionowa w internecie jest osią Y, a oś pozioma – osią X.
Właściwość z-index
akceptuje wartość liczbową, która może być liczbą dodatnią lub ujemną.
Elementy będą się wyświetlać nad innym elementem, jeśli mają większą wartość z-index
.
Jeśli w elementach nie ma ustawionego atrybutu z-index
domyślne zachowanie polega na tym, że oś Z określa kolejność źródeł dokumentu.
Oznacza to, że elementy znajdujące się niżej w dokumencie znajdują się nad elementami, które pojawiają się przed nimi.
W normalnym przepływie
Jeśli określona wartość parametru z-index
nie działa,
musisz ustawić wartość position
elementu na dowolną inną wartość niż static
.
To częste miejsce, w którym użytkownicy mają do czynienia z z-index
.
Nie dotyczy to jednak sytuacji
w kontekście flexbox czy siatki,
bo można zmienić z-index elementów elastycznych i siatkowych bez dodawania elementu position: relative
.
Ujemny z-indeks
Aby umieścić element za innym:
dodaj ujemną wartość w kolumnie z-index
.
.my-element {
background: rgb(232 240 254 / 0.4);
}
.my-element .child {
position: relative;
z-index: -1;
}
Dopóki .my-element
ma wartość początkową z-index
o wartości auto
,
znajduje się za nią element .child
.
Dodaj ten kod CSS do pliku .my-element
,
a element .child
nie będzie za nim.
.my-element {
position: relative;
z-index: 0;
background: rgb(232 240 254 / 0.4);
}
Ponieważ .my-element
ma teraz wartość position
, która jest inna niż static
i z-index
o wartości innej niż auto
,
utworzył nowy kontekst grupowania.
Oznacza to, że nawet jeśli ustawisz w .child
tak wartość z-index
o wartości -999
,
nie znajduje się za .my-parent
.
Kontekst nakładania
Kontekst skumulowany to grupa elementów, które mają wspólny element nadrzędny i poruszają się razem w górę i w dół osi Z.
W tym przykładzie
pierwszy element nadrzędny ma z-index
o wartości 1
,
więc tworzy nowy kontekst grupowania.
Jego element podrzędny ma z-index
o wartości 999
.
Obok tego elementu nadrzędnego znajduje się inny element nadrzędny z jednym elementem podrzędnym.
Element nadrzędny ma wartość z-index
o wartości 2
, a element podrzędny ma też właściwość z-index
o wartości 2
.
Ponieważ oboje rodzice tworzą kontekst,
z-index
wszystkich elementów podrzędnych zależy od tego, który z nich ma rodzic.
Elementy w kontekście grupowania: z-index
są zawsze określane względem bieżącej kolejności elementu nadrzędnego w jego własnym kontekście.
Tworzenie kontekstu grupowania
Nie musisz stosować zasad z-index
i position
, aby utworzyć nowy
kontekstu skumulowanego.
Możesz utworzyć nowy kontekst nakładania, dodając wartość dla właściwości, które tworzą nową warstwę złożoną
na przykład opacity
, will-change
i transform
.
Dostępne opcje
pełną listę właściwości znajdziesz tutaj.
Aby wyjaśnić, czym jest warstwa złożona, wyobraź sobie, że strona internetowa to obszar roboczy. Przeglądarka pobiera z niego kod HTML i CSS i na podstawie tych informacji ustala wielkość przestrzeni roboczej. Następnie strona maluje stronę na płótnie. Jeśli jakiś element miałby się zmienić, na przykład: zmienia pozycję – przeglądarka musi potem wrócić i ponownie wybrać, co ma zostać wyrenderowane.
Aby zwiększyć skuteczność,
przeglądarka tworzy nowe warstwy złożone, które są nałożone na obszar roboczy.
Działają one trochę jak karteczki pocztowe:
jej przesuwanie i zmienianie nie ma dużego wpływu na całą przestrzeń roboczą.
Zostanie utworzona nowa warstwa złożona dla elementów z atrybutami opacity
,
transform
i will-change
, ponieważ prawdopodobnie się one zmienią,
aby przeglądarka mogła jak najwydajniej przeprowadzić zmianę, korzystając z GPU do stosowania dostosowań stylu.
Zasoby
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat z-index
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
Który artykuł jest domyślnie na górze?
Jeśli kolejność nakładania elementów nie działa, którą właściwość elementu należy sprawdzić?
relative
animation
display
position
Czy moduły flexbox i siatka wymagają position: relative
?