Contesto di stacking

2.1 Proprietà z-index

Il contesto di stacking in CSS è gestito dalla proprietà z-index e determina come gli elementi si sovrappongono tra di loro sull'asse Z (la terza coordinata, perpendicolare allo schermo). Capire e usare correttamente z-index e il contesto di stacking ti permette di creare layout complessi e dinamici con elementi sovrapposti.

Fondamenti del contesto di stacking

Il contesto di stacking determina come gli elementi verranno visualizzati uno sopra l'altro. Ogni elemento su una pagina web ha un livello di stacking, che può essere modificato utilizzando la proprietà z-index.

Regole di stacking

1. Posizione nell'albero del documento: gli elementi che si trovano più in basso nell'albero del documento si sovrappongono sopra gli elementi che si trovano più in alto.
2. Proprietà z-index: gli elementi con un valore di z-index maggiore si sovrappongono sopra gli elementi con un valore di z-index minore.

Fondamenti dello z-index

La proprietà z-index definisce l'ordine di sovrapposizione degli elementi quando si sovrappongono. Gli elementi con un valore di z-index più grande vengono mostrati sopra gli elementi con un valore minore. z-index si applica solo agli elementi con posizionamento (position: relative, absolute, fixed o sticky).

Sintassi:

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

Dove:

• number: un numero intero, che può essere positivo o negativo. Più grande è il valore, più alto sarà l'elemento nell'ordine di sovrapposizione.

Esempio di utilizzo di z-index:

In questo esempio, Box 2 con z-index: 2; sarà visualizzato sopra Box 1 e Box 3, mentre Box 1 sarà visualizzato sopra 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 Contesto di stacking (stacking context)

Il contesto di stacking è un gruppo di elementi, che sono considerati come un'unità unica quando si definisce l'ordine di sovrapposizione. Il contesto di stacking viene creato quando vengono soddisfatte determinate condizioni, come l'applicazione di z-index con posizionamento o la presenza di altre proprietà CSS.

Creazione di un contesto di stacking

Un contesto di stacking viene creato nei seguenti casi:

1. L'elemento ha un posizionamento relative, absolute, fixed o sticky e un valore di z-index diverso da auto.
2. L'elemento ha una proprietà opacity con un valore inferiore a 1.
3. L'elemento ha una proprietà transform, filter, perspective, clip-path, mask o mask-image diversa dal valore predefinito.
4. L'elemento ha una proprietà contain con un valore layout, paint, o strict.

Esempio di creazione di un contesto di stacking:

    
      .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">
        Elemento genitore
        <div class="child-blue">1</div>
        <div class="child-red">2</div>
      </div>
    
  

Spiegazione del codice:

• .parent: elemento con position: relative; e z-index: 10;, che crea un nuovo contesto di stacking
• .child-blue: elemento con position: absolute; e z-index: 1;, che si trova nel nuovo contesto di stacking creato dall'elemento genitore
• .child-red: elemento con position: absolute; e z-index: 2;, che si trova anch'esso nel nuovo contesto di stacking creato dall'elemento genitore, e verrà posizionato sopra .child-blue

2.3 Interazione tra contesti di stacking

Gli elementi all'interno di un contesto di stacking non possono essere sovrapposti a elementi di un altro contesto di stacking se non viene modificato l'ordine dei contesti stessi. Questo significa che gli elementi con z-index più alto all'interno di uno stesso contesto di stacking verranno sempre visualizzati sopra gli elementi con z-index più basso nello stesso contesto.

Esempio di interazione tra contesti di stacking:

    
      .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>
    
  

In questo esempio, il contenitore .container2 con z-index: 20; verrà visualizzato sopra il contenitore .container1 con z-index: 10;. Gli elementi all'interno di ciascun contenitore saranno distribuiti in base al loro z-index, ma non si sovrapporranno con gli elementi dell'altro contenitore.

2.4 Valori negativi di z-index

z-index può assumere valori negativi, il che permette di posizionare gli elementi più in basso rispetto agli elementi con valore di z-index pari a zero o positivo.

    
      .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>
    
  

Spiegazione del codice:

• .box1: Elemento con z-index: -1;, che sarà posizionato più in basso dell'elemento con z-index: 0;

Consigli per l'utilizzo di z-index:

• Minimizza l'uso di z-index: cerca di usare z-index solo quando è davvero necessario. Questo aiuta ad evitare strutture di sovrapposizione complesse e confuse
• Crea contesti di stacking consapevolmente: creare nuovi contesti di stacking aiuta a gestire la sovrapposizione degli elementi, ma può complicare la struttura del documento
• Usa valori di z-index semanticamente significativi: assegna valori di z-index con un significato logico, ad esempio, utilizza valori positivi per gli elementi superiori e negativi per quelli inferiori