Bambini di z-index: 'auto' vs z-index: 0, e qual è il "contesto di impilamento" in CSS?

Question

Precedentemente, credevo che un elemento figlio non potesse essere z-indexato su un elemento che è un fratello del suo elemento genitore che ha un indice z più alto del suo genitore. Ad esempio, le divisioni A e B sono fratelli. Div A ha un z-index di 10, e div B ha un z-index 5. Div B ha un elemento secondario: Div C, con z-index 9999. Dalla mia comprensione, sarà div Cnon essere posizionata sopra div A, perché L'indice div C (div B) ha uno z-index inferiore a div A. Ciò è vero, a meno che lo div B non abbia un indice z di "auto". Quando div B ha un indice z di 'auto', che sarebbe '0', dal momento che eredita dal corpo, div C posizioni oltre div A, anche se div B's z-index è in realtà LOWER di quanto non fosse quando non era t lavorando.

Dalla specifiche CSS2, z-index 'auto' è definito come

Il livello di strato del riquadrato generato nel contesto di stratificazione corrente è 0. La scatola non stabilisce un nuovo contesto di stratificazione meno che non sia l'elemento radice.

Sto avendo difficoltà a capire "accatastamento contesto." Sembra essere l'unica differenza tra un z-index definito di 0, e un valore predefinito di 'auto', che è pari a 0, ma anche non ha alcun contesto di stratificazione . Più precisamente:

Perché i figli di elementi senza contenuto di stack z-indexing differiscono da quelli all'interno di un contesto di stacking?

Ecco un violino che mostra la differenza tra z-index di 0 e un indice z di auto. Il div verde è un figlio del div blu, e il div rosso è un fratello del div blu.

http://jsfiddle.net/c7Tvt/

Answer 1

Nel tuo esempio, si dispone di due scenari, li chiamano Blu e Blu-2.

In blu, si hanno due contesti di impilamento, il primo contiene #blue e il secondo contiene #red e #green. #blue si trova nel proprio contesto di stacking perché z-index: auto e questo contesto è semplicemente parte dello stack predefinito.

In Blu-2, è stato definito z-index: 0 per #blue, quindi fa parte dello stesso contesto di impilamento come #red. In Blue-2, #blue viene dipinto per primo perché ha lo z-index più basso, 0. Tuttavia, #green è un figlio di #blue e viene dipinto su #blue, il genitore e il figlio formano un nuovo contesto di stacking (un contesto di sovrapposizione se desideri). Infine, #red è dipinto sopra la pila blu-verde perché lo z-indice rosso è 2, che è maggiore dell'indice z blu di 0. In questo caso, l'indice z del verde influisce sul suo livello di impilamento rispetto a blu e qualsiasi altro elemento figlio in #blue. In Blue-2 ci sono tre contesti di impilamento, il predefinito (n. 1), quello rosso e blu (n. 2) e l'altro blu e verde (n. 3).

punto chiave
z-index: auto non inizia aggiungere un elemento posizionato in un nuovo contesto di stratificazione, mentre z-index: 0 fa. Ricorda, c'è almeno un contesto di impilamento, quello predefinito che è definito per gli elementi in virtù del loro ordine HTML/DOM naturale sulla pagina.

Nota: mi sono permesso di descrivere la posizione di picchettamento come se aveste due pagine web, una con #red, #blue, #green e la seconda con #red2, #blue2, #green2. In realtà, dal momento che tutte le div sono sulla stessa pagina, tutti i livelli di raggruppamento contengono tutti gli elementi. Quando ci sono due div rosse nello stesso stack, lo #red2 verrà dipinto su #red poiché gli elementi più in basso dell'albero DOM sono dipinti su elementi precedenti.

Riferimento
ho trovato il seguente molto utile per leggere:
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_2

Se si vuole ancora più in dettaglio, prova a guardare:
http://www.w3.org/TR/CSS21/zindex.html