Kolejność nakładania elementów i konteksty stosu

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.

Każda oś otaczająca element

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

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?

1
Jest z tyłu.
2
Spróbuj jeszcze raz.
3
Spróbuj jeszcze raz.
4
Ostatni w dokumencie jest na samej górze!

Jeśli z-index nie działa, którą właściwość elementu sprawdzisz?

display
Ta właściwość nie jest prawdopodobna, ponieważ z-index nie działa.
relative
Jest to wartość CSS, a nie właściwość.
position
Upewnij się, że ma wartość inną niż static.
animation
Ta właściwość nie jest prawdopodobna, ponieważ z-index nie działa.

Czy Flexbox i siatka wymagają position: relative?

Tak
Te typy wyświetlaczy nie potrzebują tej funkcji.
Nie
Stosowanie kolejności nakładania elementów w flexbox lub układzie siatki działa bez elementu position: relative.