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.

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

• Wymuszanie warstw
• Przewodnik po animacjach: wymuszanie utworzenia warstwy
• Informacje o z-index

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat z-index

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>