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

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.

Każda oś otaczająca element

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?

1
Jest z tyłu.
2
Spróbuj jeszcze raz.
3
Spróbuj jeszcze raz.
4
Tak, ostatni w dokumencie siedzi na górze!

Jeśli kolejność nakładania elementów nie działa, którą właściwość elementu należy sprawdzić?

display
To nie jest prawdopodobna właściwość, która powoduje, że kolejność nakładania elementów nie działa.
relative
To jest wartość CSS, a nie właściwość.
position
Upewnij się, że jest ustawiona inna wartość niż static.
animation
To nie jest prawdopodobna właściwość, która powoduje, że kolejność nakładania elementów nie działa.

Czy moduły flexbox i siatka wymagają position: relative?

Tak
Te typy reklam go nie potrzebują.
Nie
Użycie kolejności nakładania elementów w układzie flexbox lub siatki będzie działać bez funkcji position: relative.