Podcast o CSS – 019: kolejność nakładania elementów i konteksty warstwowe
Załóżmy, że masz kilka elementów, które są całkowicie rozmieszczone jeden nad drugim. Możesz napisać taki kod HTML:
<div class="stacked-items">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
</div>
Który element domyślnie znajduje się nad drugim? Aby wiedzieć, który element to zrobi, musisz poznać z-index i konteksty warstwowe.
Kolejność nakładania elementów
Właściwość z-index
bezpośrednio ustawia kolejność warstw w kodzie HTML na podstawie przestrzeni 3D przeglądarki – osi Z.
Ta oś pokazuje, które warstwy są umieszczone bliżej Ciebie, a które oddalone.
Oś pionowa na stronie internetowej jest oś Y, a oś pozioma – oś X.
Właściwość z-index
może mieć wartość liczbową dodatnią lub ujemną.
Elementy będą pojawiać się nad innymi, jeśli mają wyższą wartość z-index
.
Jeśli w elementach nie ma ustawionego z-index
, domyślne zachowanie polega na tym, że kolejność źródeł dokumentu określa oś Z.
Oznacza to, że elementy znajdujące się niżej w dokumencie są umieszczone nad elementami, które pojawiły się przed nimi.
W normalnym procesie, jeśli ustawisz konkretną wartość dla parametru z-index
i nie będzie ona działać, ustaw wartość position
elementu na inną niż static
.
To często miejsce, w którym użytkownicy mają problemy z usługą z-index
.
Nie dotyczy to jednak flexbox lub siatki, ponieważ możesz zmienić kolejność nakładania elementów Flex i siatki bez dodawania elementu position: relative
.
Ujemna kolejność nakładania elementów
Aby ustawić element za innym elementem, dodaj wartość ujemną dla 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
wynoszącą auto
, element .child
będzie za nią.
Dodaj poniższy kod CSS do elementu .my-element
, a element .child
nie będzie za nim za nim.
.my-element {
position: relative;
z-index: 0;
background: rgb(232 240 254 / 0.4);
}
.my-element
ma teraz wartość position
inną niż static
oraz wartość z-index
inną niż auto
, dlatego utworzyliśmy nowy kontekst warstwowy.
Oznacza to, że nawet jeśli skonfigurujesz .child
na z-index
o wartości -999
, nie będzie on znajdować się za .my-parent
.
Kontekst stosu
Kontekst skumulowania to grupa elementów, które mają ten sam element nadrzędny i przesuwają się razem w górę i w dół osi Z.
W tym przykładzie pierwszy element nadrzędny ma właściwość z-index
o wartości 1
, więc tworzy nowy kontekst stosowania.
Jego element podrzędny ma wartość z-index
równą 999
.
Obok tego elementu nadrzędnego znajduje się inny element nadrzędny z 1 elementem podrzędnym.
Element nadrzędny ma z-index
o wartości 2
, a element podrzędny ma też z-index
o wartości 2
.
Ponieważ oboje rodzice tworzą kontekst, wartość z-index
wszystkich elementów podrzędnych zależy od kontekstu rodzica.
Pozycje z-index
elementów w kontekście stosu są zawsze względem bieżącej kolejności elementów nadrzędnych we własnym kontekście.
Tworzenie kontekstu stosu
Nie musisz stosować właściwości z-index
i position
, aby utworzyć nowy kontekst skumulowany.
Nowy kontekst stosu możesz utworzyć, dodając wartość właściwości, które tworzą nową warstwę złożoną, np. opacity
, will-change
i transform
.
Pełną listę usług znajdziesz tutaj
Aby wyjaśnić, czym jest warstwa złożoną, wyobraźmy sobie, że strona internetowa to płótno. Przeglądarka korzysta z kodu HTML i CSS, aby określić wielkość obszaru roboczego. Następnie maluje ona stronę na tym płótnie. Jeśli jakiś element miałby się zmienić, np. zmieniał się położenie, wówczas przeglądarka musi się cofnąć i ponownie wybrać, co wyrenderować.
Aby zwiększyć wydajność, przeglądarka tworzy nowe warstwy złożone, które są nałożone na obszar roboczy.
Wygląda to trochę jak karteczka samoprzylepna:
przesunięcie i zmiana nie ma większego wpływu na całą płótno.
W przypadku elementów z elementami opacity
, transform
i will-change
tworzona jest nowa warstwa złożona, ponieważ te elementy prawdopodobnie ulegną zmianie. Dzięki temu przeglądarka używa dostosowania stylów, aby przeglądarka zadbać o jak największą skuteczność zmian.
Zasoby
- Wymuszanie warstw
- Przewodnik po animacji: Wymuszanie tworzenia warstwy
- Omówienie kolejności nakładania elementów
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o z-index
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
Który artykuł jest domyślnie wyświetlany na górze?
Jeśli z-index nie działa, którą właściwość elementu sprawdzisz?
display
relative
position
static
.animation
Czy Flexbox i siatka wymagają position: relative
?
position: relative
.