CSS: z-index e ordine di sovrapposizione degli elementi

Quella che segue è una traduzione dell'Appendice E delle specifiche CSS 2.1. L'appendice in questione definisce come la proprietà z-index regoli l'ordine di sovrapposizione degli elementi. Per ulteriori dettagli vi rimando al capitolo originale.

Questo capitolo definisce l'ordine di rappresentazione CSS 2.1 con maggiori dettagli rispetto al resto delle specifiche.

Definizioni

Ordinamento ad albero

Il preordinamento trasversale dell'albero di rendering, in ordine logico (non visivo) per il contenuto bidirezionale, dopo aver tenuto conto delle proprietà che spostano i box, come il valore 'run-in' di 'display'.

Elemento

In questa descrizione, "elemento" si riferisce agli elementi effettivi, pseudo-elementi e box anonimi. Gli pseudo-elementi e i box anonimi vengono trattati come discendenti ove appropriato. Per esempio, un marcatore di elenco esterno viene prima del contiguo box ':before' nel box di riga, il quale a sua volta viene prima del contenuto del box e così via.

Ordine di rappresentazione

La parte inferiore dello stack è quella più lontana dall'utente, la parte superiore è la più vicina:

               |     |         |    |        
               |          |    |    |     ⇦ ☻
               |          |         |     utente
  z-index:  canvas  -1    0    1    2

Lo sfondo del contesto di stacking e la maggior parte dei contesti di stacking posizionati in modo negativo si trovano nella parte inferiore dello stack, mentre la maggior parte dei contesti di stacking posizionati in modo positivo si trovano nella parte superiore dello stack.

Il canvas è trasparente se è contenuto all'interno di un altro elemento, o gli viene assegnato un colore definito dal programma utente se non lo è. È di estensione infinita e contiene l'elemento radice. Inizialmente il viewport è ancorato con il suo angolo superiore sinistro all'origine del canvas.

L'ordine di stacking per un elemento che genera un contesto di stacking (si veda la proprietà 'z-index') è:

1. Se l'elemento è un elemento radice:
   1. il colore di sfondo dell'elemento sull'intero canvas.
   2. l'immagine di sfondo dell'elemento, sull'intero canvas, ancorata all'origine che verrebbe usata se fosse rappresentata per l'elemento radice.
2. Se l'elemento è di blocco, voce di elenco o equivalente ad un elemento di blocco:
   1. il colore di sfondo dell'elemento a meno che non sia l'elemento radice.
   2. l'immagine di sfondo dell'elemento a meno che non sia l'elemento radice.
   3. il bordo dell'elemento.
   Altrimenti, se l'elemento è una tabella di blocco:
   1. sfondi della tabella (colore quindi immagine) a meno che non sia l'elemento radice.
   2. sfondi del gruppo di colonna (colore quindi immagine).
   3. sfondi di colonna (colore quindi immagine).
   4. sfondi del gruppo di riga (colore quindi immagine).
   5. sfondi di riga (colore quindi immagine).
   6. sfondi di cella(colore quindi immagine).
   7. tutti i bordi della tabella (nell'ordinamento ad albero per i bordi separati).
3. Contesti di stacking formati da discendenti posizionati con z-index negativo (escluso 0) seguendo prima l'ordine di z-index (prima i negativi), quindi l'ordinamento ad albero.
4. Per tutti i suoi discendenti nel flusso, non posizionati e di blocco: se l'elemento è di blocco, voce di elenco o equivalente di blocco:
   1. colore di sfondo dell'elemento.
   2. immagine di sfondo dell'elemento.
   3. bordo dell'elemento.
   Altrimenti, l'elemento è una tabella:
   1. sfondi della tabella (colore quindi immagine).
   2. sfondi del gruppo di colonna (colore quindi immagine).
   3. sfondi di colonna (colore quindi immagine).
   4. sfondi del gruppo di riga (colore quindi immagine).
   5. sfondi di riga (colore quindi immagine).
   6. sfondi di cella (colore quindi immagine).
   7. tutti i bordi della tabella (nell'ordinamento ad albero per i bordi separati).
5. Tutti i discendenti non posizionati flottanti nell'ordinamento ad albero. Per ciascuno di loro, si tratti l'elemento come se avesse creato un nuovo contesto di stacking, ma tutti i discendenti che creano effettivamente un nuovo contesto di stacking dovrebbero essere considerati come parte del contesto di stacking del genitore, non di quello nuovo.
6. Se l'elemento è un elemento inline che genera un contesto di stacking, allora:
   1. Per ogni box di riga in cui si trova l'elemento:
      1. Si veda 7.2.1 per i(l) box dell'elemento in quel box di riga (nell'ordinamento ad albero).
7. Altrimenti, prima per l'elemento, quindi per tutti i suoi discendenti di blocco non posizionati nel flusso secondo l'ordinamento ad albero:
   1. Se l'elemento è un elemento di blocco rimpiazzato, allora: il contenuto rimpiazzato, in modo atomico.
   2. Altrimenti, per ogni box di riga di quell'elemento:
      1. Per ogni box, figlio di quell'elemento in quel box di riga, nell'ordinamento ad albero:
         1. colore di sfondo dell'elemento.
         2. immagine di sfondo dell'elemento.
         3. bordo dell'elemento.
         4. Per gli elementi inline:
            1. Per tutti i discendenti nel flusso inline non posizionati all'interno di questo box di riga, e per tutte le ricorrenze di testo all'interno dell'elemento contenuto in questo box di riga, nell'ordinamento ad albero:
               1. Se si tratta di una ricorrenza di testo, allora:
                  1. ogni sottolineatura che influenza il testo dell'elemento, nell'ordinamento ad albero degli elementi che applicano la sottolineatura (in modo che la sottolineatura più interna dell'elemento, se ve n'è una, viene rappresentata più in alto e la sottolineatura dell'elemento radice, se ve n'è una, viene rappresentata più in basso).
                  2. ogni sovralineatura che influenza il testo dell'elemento, nell'ordinamento ad albero degli elementi che applicano la sovralineatura (in modo che la sovralineatura più interna dell'elemento, se ve n'è una, viene rappresentata più in alto e la sovralineatura dell'elemento radice, se ve n'è una, viene rappresentata più in basso).
                  3. il testo
                  4. ogni barratura che influenza il testo dell'elemento, nell'ordinamento ad albero degli elementi che applicano la barratura (in modo che la barratura più interna dell'elemento, se ve n'è una, viene rappresentata più in alto e la barratura dell'elemento radice, se ve n'è una, viene rappresentata più in basso).
               2. Altrimenti, si veda 7.2.1 per questo elemento.
            Per gli elementi inline-block e inline-table:
            1. Per ciascuno di questi. si tratti l'elemento come se avesse creato un nuovo contesto di stacking, ma qualsiasi discendente che effettivamente crea un nuovo contesto di stacking dovrebbe essere considerato parte del contesto di stacking del genitore, non di questo nuovo.
            Per gli elementi inline rimpiazzati:
            1. il contenuto rimpiazzato, in modo atomico.

         Alcuni box possono essere stati generati dalla segmentazione delle righe o dall'algoritmo bidirezionale Unicode.

      2. Come opzione, il contorno dell'elemento (si veda 10).
   3. Come opzione, se l'elemento è di blocco, il contorno dell'elemento (si veda 10).
8. Tutti i discendenti posizionati, con 'z-index: auto' o 'z-index: 0', nell'ordinamento ad albero. Per quelli con 'z-index: auto', si tratti l'elemento come se avesse creato un nuovo contesto di stacking, ma ogni discendente che crea effettivamente un nuovo contesto di stacking dovrebbe essere considerato parte del contesto di stacking del genitore, non di questo nuovo. Per quelli con 'z-index: 0', si tratti il contesto di stacking generato in modo atomico.
9. I contesti di stacking formati dai discendenti posizionati con z-index maggiore o uguale a 1 nell'ordine di z-index (prima il minore) e quindi l'ordinamento ad albero.
10. Da ultimo, le implementazioni che non disegnano contorni nei punti precedenti devono a questo punto disegnare tali contorni a partire dal contesto di stacking (si raccomanda di disegnare i contorni in questo punto e non in quelli precedenti).

Note

Lo sfondo dell'elemento radice viene rappresentato una sola volta sull'intero canvas.

Dato che gli sfondi degli elementi inline bidirezionali vengono rappresentati nell'ordinamento ad albero, essi vengono posizionati secondo l'ordine visuale. Poiché il posizionamento degli sfondi inline non è specificato nei CSS 2.1, il risultato esatto di questi due requisiti viene definito dal programma utente. I CSS3 potranno definirlo con maggiori dettagli.