Corso di CSS / z-index CSS e contesti di sovrapposizione

Lo z-index controlla lo stacking all'interno del contesto di sovrapposizione rilevante piuttosto che assegnare a ogni elemento una profondità globale. Un figlio con un grande z-index può rimanere dietro un elemento in un contesto antenato superiore, e lo z-index non può annullare il clipping da overflow.

Separa il posizionamento dall’ordine di sovrapposizione

Per confrontare l'ordine di sovrapposizione, i due elementi devono effettivamente occupare la stessa area dello schermo. Se sono completamente spostati a sinistra e a destra, o verso l'alto e il basso, cambiare lo z-index non farà alcuna differenza. Per prima cosa, controlla la posizione rettangolare dell'elemento negli strumenti per sviluppatori e determina se esistono aree di sovrapposizione. Per gli standard di posizionamento degli elementi sovrapposti, consulta gli standard di spazio e coordinate di position: relative, absolute, fixed e sticky.

La posizione determina lo standard delle coordinate e la partecipazione al flusso, mentre lo z-index determina il davanti e il dietro quando si sovrappongono. Modificare le coordinate con top e modificare l'ordine con z-index sono compiti diversi. L'esempio qui sotto fissa le posizioni del badge e della card e poi cambia solo lo z-index del genitore, così puoi confrontare le due funzioni senza confonderle.

Lo z-index può essere applicato agli elementi posizionati come relative·absolute, e può essere utilizzato per gli elementi Flex e Grid anche se la posizione è statica. Se assegni solo numeri ai normali blocchi del flusso generale e ti aspetti effetti, le condizioni di applicazione potrebbero non essere soddisfatte. Puoi controllare il significato del target e del valore nella descrizione di z-index di MDN.

Confrontare i contesti di sovrapposizione come gruppi

Un contesto di sovrapposizione raggruppa i suoi discendenti per confronti di impilamento esterni. Se il genitore a sinistra ha z-index: 1 e la scheda a destra ha z-index: 2, un distintivo figlio con z-index: 9999 all'interno del contesto a sinistra non compete direttamente con la scheda a destra. Il gruppo genitore rimane al di sotto di essa.

Left parent context: z-index 1
└ Child badge: z-index 9999
Right card context: z-index 2

Outside, compare parent 1 and card 2.

Sollevare il genitore a sinistra a z-index: 3 mette l'intero contesto sopra la scheda a destra a 2. Il distintivo figlio mantiene il suo valore 9999 ma diventa visibile nella sovrapposizione. I numeri di antenati e discendenti non si sommano per produrre un valore globale come 10000. Vedi MDN: Contesto di impilamento.

Identificare le dichiarazioni che creano contesti

La tabella sopra è un elenco di condizioni frequentemente incontrate e non è un elenco di tutte le condizioni di creazione. Devi distinguere tra i casi in cui è specificato solo relative e z-index è auto, e i casi in cui è specificato z-index: 0 per relative. Se la sovrapposizione è cambiata, controlla non solo il numero ma anche l'opacità o la trasformazione aggiunta di recente all'antenato.

All’interno dello stesso contesto puoi confrontare l’ordine di sovrapposizione utilizzando il numero z-index dell'elemento che soddisfa le condizioni dell'applicazione. Tuttavia, poiché l'ordine di disegno complessivo del CSS ha più livelli, inclusi livelli negativi, flusso normale ed elementi posizionati, non considerare auto per tutti gli elementi come uguale al numero 0 o calcolare l'ordine complessivo della pagina basandoti solo sui numeri. La pratica di apprendimento limita le condizioni ai numeri positivi e al contesto esplicito del genitore.

Confronta i valori di z-index del genitore e del figlio

Salva il codice qui sotto come stacking-context.html e aprilo. Il badge è posizionato a 80-144px dall'alto, e la scheda a destra è posizionata nell'area 110-230px, con una sovrapposizione verticale di 34px. Le posizioni sinistra e destra usano un rapporto rispetto alla larghezza del genitore per mantenere la sovrapposizione sui dispositivi mobili. Genitori ed elementi sono calcolati come border-box e configurati per prevenire overflow non necessario fuori dal contenitore.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>stacking-context.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.scene { position: relative; width: min(100%, 520px); height: 300px; background: #f1f4f7; }
 .left { position: absolute; z-index: 1; left: 0; top: 20px; width: 60%; height: 180px;
 padding: 16px; background: #ffe3b5; }
 .badge { position: absolute; z-index: 9999; left: 70%; top: 60px; width: 50%; height: 64px;
 padding: 8px; background: #f5a7cc; }
 .right { position: absolute; z-index: 2; left: 50%; top: 110px; width: 45%; height: 120px;
 padding: 12px; background: #9cd4f2; }
 .raised .left { z-index: 3; }
  </style>
</head>
<body>
<h1>Child and parent z-index values</h1><h2>Parent: 1; right card: 2</h2><div class="scene original"><div class="left">Left parent<div class="badge">Child badge<br>9999</div></div><div class="right">Right card<br>z-index: 2</div></div><h2>Parent: 3; right card: 2</h2><div class="scene raised"><div class="left">Left parent<div class="badge">Child badge<br>9999</div></div><div class="right">Right card<br>z-index: 2</div></div>
</body>
</html>

Nella prima sezione, il badge rosa sovrapposto è nascosto dalla scheda blu, e nella seconda sezione il badge rosa è visibile sopra la scheda blu. L'unica differenza tra le due zone è 1 e 3 del genitore sinistro. Il seguente diagramma esplicativo confronta i due stati con posizioni schematiche invariate. Non è uno screenshot del browser.

1. Aumenta solo il numero .badge nella prima sezione a 99999. La relazione tra genitore 1 e scheda 2 viene mantenuta, quindi la parte sovrapposta continua a essere coperta dalla scheda. Ripristina il numero a 9999.
2. Aggiungi la regola .original .left { z-index: 3; }. Il badge salirà sulla scheda senza cambiare le coordinate. Dopo la conferma, rimuovere la regola aggiunta.
3. Nella prima sezione originale, modifica solo lo z-index di .left su auto. In questo esempio, senza altre proprietà di creazione, il genitore sinistro non crea un contesto separato, quindi il contesto del badge viene confrontato con la scheda esterna. Assicurati che il badge sia visibile davanti e ripristinalo a 1.
4. Restringi o allarga lo schermo per assicurarti che il badge e la scheda si sovrappongano ancora. Poiché le modifiche numeriche non sono visibili quando le coordinate sono separate, i confronti devono essere fatti mantenendo l'area di sovrapposizione.

Distingui il clipping da overflow dallo stacking

Se l'antenato tronca il contenuto con overflow: hidden, le parti al di fuori dei suoi limiti non possono essere rese nuovamente visibili solo con un alto z-index. Se è in avanti nell'ordine ma non visibile, devi determinare se è coperto da un altro elemento o tagliato al limite di un antenato. Salva il codice sottostante come stacking-clip.html ed eseguilo. Anche se aumenti lo z-index, se è tagliato al limite del genitore, controlla le condizioni di taglio per Overflow CSS, testo lungo a capo e puntini di sospensione.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>stacking-clip.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.frame { position: relative; width: min(100%, 260px); height: 100px; overflow: hidden;
 border: 2px solid #789; background: #e8f5de; }
 .popup { position: absolute; z-index: 9999; left: 80%; top: 24px; width: 90px; height: 60px;
 padding: 8px; background: #f5a7cc; }
  </style>
</head>
<body>
<h1>A box that stays clipped at a higher z-index</h1><div class="frame">Parent boundary<div class="popup">Badge<br>9999</div></div><p>The right side of the badge extends beyond its parent's boundary.</p>
</body>
</html>

1. Assicurati che il lato destro del badge sia ritagliato al bordo del genitore. Anche se cambi lo z-index a 99999, la parte troncata non appare. Ripristina il numero a 9999.
2. Cambia solo l'overflow del .frame in visible. Le altre coordinate e numeri rimangono gli stessi, ma l'area al di fuori del confine è visibile. Dopo il confronto, riportalo a hidden.

Sugli schermi reali, rimuovere l'overflow può influenzare altri scopi, come lo scorrimento e gli angoli arrotondati. Determina prima se il troncamento è previsto, e se il popup dovrebbe essere al di fuori dei limiti, sposta la struttura fuori dall'antenato troncante o considera un metodo di visualizzazione separato secondo necessità. Non cambiare l'overflow di tutti i genitori contemporaneamente solo perché nasconde il menu.

Segui una sequenza diagnostica

1. Verifica se l'elemento esiste effettivamente e non è nascosto a causa di display·visibility·opacity.
2. Controlla le posizioni rettangolari dei due elementi per vedere se esiste un'area di sovrapposizione reale.
3. Risali dall’elemento interessato lungo i suoi antenati per individuare dichiarazioni che creano un contesto di sovrapposizione. Determina quale genitore comune i contesti in competizione dovrebbero confrontare.
4. Decidi se il valore da modificare appartiene al contesto del figlio o a quello del genitore. Controlla anche gli elementi fratelli interessati e regola i valori solo all'interno dell'intervallo necessario.
5. Se non lo vedi nemmeno dopo aver cambiato l'ordine, controlla troncamenti come overflow·clip e altri standard di coordinate. Dopo aver completato il confronto, i valori temporaneamente modificati vengono ripristinati ai valori originali.

Lo z-index di un elemento normale non dovrebbe essere considerato come un mezzo per superare uno strato di visualizzazione separato, come un dialogo sul livello superiore, semplicemente aumentando il numero. Durante la risoluzione dei problemi di schede e badge predefiniti, è importante capire prima il contesto reale del genitore e il troncamento. Piuttosto che continuare semplicemente ad aumentare i numeri, puoi configurare l'ordine desiderato anche con valori piccoli verificando quali gruppi vengono confrontati.