Kontekst nakładania

2.1 Właściwość z-index

Kontekst nakładania w CSS jest kontrolowany przez właściwość z-index i definiuje, jak elementy nakładają się na siebie na osi Z (trzeciej współrzędnej, prostopadłej do ekranu). Zrozumienie i właściwe użycie z-index i kontekstu nakładania pozwala tworzyć skomplikowane i dynamiczne układy z elementami nakładającymi się.

Podstawy kontekstu nakładania

Kontekst nakładania określa, jak elementy będą wyświetlane jeden nad drugim. Każdy element na stronie internetowej ma poziom nakładania, który można zmienić za pomocą właściwości z-index.

Zasady nakładania

1. Pozycja w drzewie dokumentu: elementy, które znajdują się niżej w drzewie dokumentu, nakładają się na elementy, które znajdują się wyżej.
2. Właściwość z-index: elementy z większą wartością z-index nakładają się na elementy z mniejszą wartością z-index.

Podstawy z-index

Właściwość z-index określa kolejność nakładania elementów, gdy nakładają się one na siebie. Elementy z większą wartością z-index są wyświetlane nad elementami z mniejszą wartością. z-index ma zastosowanie tylko do elementów z pozycjonowaniem (position: relative, absolute, fixed lub sticky).

Składnia:

    
      .element {
        position: relative; /* lub absolute, fixed, sticky */
        z-index: number;
      }
    
  

Gdzie:

• number: liczba całkowita, która może być dodatnia lub ujemna. Im większa wartość, tym wyżej element będzie w kolejności nakładania

Przykład użycia z-index:

W tym przykładzie Box 2 z z-index: 2; będzie wyświetlany nad Box 1 i Box 3, a Box 1 będzie wyświetlany nad Box 3.

    
      .wrapper {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }

      .box3 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: green;
      }
    
  

    
      <div class="wrapper">
        <div class="box box1">Box 1</div>
        <div class="box box2">Box 2</div>
        <div class="box box3">Box 3</div>
      </div>
    
  

2.2 Kontekst nakładania (stacking context)

Kontekst nakładania — to grupa elementów, które są traktowane jako całość przy określaniu kolejności nakładania. Kontekst nakładania tworzony jest przy spełnieniu określonych warunków, takich jak zastosowanie z-index z pozycjonowaniem lub obecność innych właściwości CSS.

Tworzenie kontekstu nakładania

Kontekst nakładania tworzony jest w następujących przypadkach:

1. Element ma pozycjonowanie relative, absolute, fixed lub sticky i wartość z-index, różną od auto.
2. Element ma właściwość opacity z wartością mniejszą niż 1.
3. Element ma właściwość transform, filter, perspective, clip-path, mask lub mask-image, różną od wartości domyślnej.
4. Element ma właściwość contain z wartością layout, paint, lub strict.

Przykład tworzenia kontekstu nakładania:

    
      .parent {
        position: relative;
        z-index: 10;
        min-height: 300px;
        padding: 20px;
        color: white;
        background-color: #f1c40f;
      }

      .child-blue {
        position: absolute;
        z-index: 1;
        top: 50px;
        left: 50px;
        min-width: 125px;
        min-height: 125px;
        background-color: #3498db;
      }

      .child-red {
        position: absolute;
        z-index: 2;
        top: 100px;
        left: 100px;
        min-width: 125px;
        min-height: 125px;
        background-color: #e74c3c;
      }
    
  

    
      <div class="parent">
        Element nadrzędny
        <div class="child-blue">1</div>
        <div class="child-red">2</div>
      </div>
    
  

Wyjaśnienie kodu:

• .parent: element z position: relative; i z-index: 10;, który tworzy nowy kontekst nakładania
• .child-blue: element z position: absolute; i z-index: 1;, który znajduje się w nowym kontekście nakładania, stworzonym przez nadrzędny element
• .child-red: element z position: absolute; i z-index: 2;, który również znajduje się w nowym kontekście nakładania, stworzonym przez nadrzędny element, i będzie umieszczony ponad .child-blue

2.3 Współdziałanie kontekstów nakładania

Elementy w jednym kontekście nakładania nie mogą być nakładane na elementy z innego kontekstu nakładania, chyba że nie zmienia się kolejność samych kontekstów. Oznacza to, że elementy z wyższym z-index wewnątrz jednego kontekstu nakładania będą zawsze wyświetlane nad elementami z niższym z-index w tym samym kontekście.

Przykład współdziałania kontekstów nakładania:

    
      .wrapper {
        min-height: 500px;
      }

      .container1 {
        position: relative;
        z-index: 10;
        padding: 20px;
        margin-bottom: 200px;
        background-color: lightgrey;
      }

      .container2 {
        position: relative;
        z-index: 20;
        padding: 20px;
        background-color: lightpink;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }
    
  

    
      <div class="wrapper">
        <div class="container1">
          <div class="box box1">Box 1</div>
          <div class="box box2">Box 2</div>
        </div>

        <div class="container2">
          <div class="box box1">Box 3</div>
          <div class="box box2">Box 4</div>
        </div>
      </div>
    
  

W tym przykładzie kontener .container2 z z-index: 20; będzie wyświetlany nad kontenerem .container1 z z-index: 10;. Elementy wewnątrz każdego kontenera będą rozdzielane zgodnie z ich z-index, ale nie będą nakładać się z elementami z innego kontenera.

2.4 Wartości ujemne z-index

z-index może przyjmować wartości ujemne, co pozwala umieścić elementy poniżej innych elementów z zerową lub dodatnią wartością z-index.

    
      .container {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: -1;
        top: 100px;
        left: 100px;
        background-color: #3498db;
      }

      .box2 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: #e74c3c;
      }
    
  

    
      <div class="container">
        <div class="box box1">-1</div>
        <div class="box box2">0</div>
      </div>
    
  

Wyjaśnienie kodu:

• .box1: Element z z-index: -1;, który będzie umieszczony poniżej elementu z z-index: 0;

Porady dotyczące użycia z-index:

• Minimalizuj użycie z-index: staraj się używać z-index tylko wtedy, gdy jest to naprawdę konieczne. Pomaga to uniknąć skomplikowanych i zagmatwanych struktur nakładania
• Twórz konteksty nakładania świadomie: tworzenie nowych kontekstów nakładania pomaga zarządzać nakładaniem elementów, ale może skomplikować strukturę dokumentu
• Używaj semantycznie sensownych wartości z-index: przypisuj wartości z-index sensownie, na przykład używaj wartości dodatnich dla górnych elementów i ujemnych dla dolnych