Perché z-index non funziona?

Question

Quindi, se ho capito correttamente z-index, sarebbe perfetto in questa situazione:

voglio collocare l'immagine in basso (il tag/scheda) al di sotto del div sopra di esso. Quindi non puoi vedere i bordi affilati. Come faccio a fare questo?

z-index:-1 // on the image tag/card 

o

z-index:100 // on the div above 

non funziona neanche. Neanche una combinazione di nulla di simile. Come mai?

Answer 1

La struttura z-index funziona solo su elementi con un valore diverso da positionstatic (ad esempio position: absolute;, position: relative; o position: fixed).

C'è anche position: sticky; che è supportato in Firefox, è prefissato in Safari, ha funzionato per qualche tempo nelle versioni precedenti di Chrome con un flag personalizzato ed è all'esame di Microsoft da aggiungere al proprio browser Edge.

Answer 2

i tuoi elementi devono avere un attributo di posizione. (ad esempio, assoluto, relativo, fisso) o z-index non funzionerà

Answer 3

In molti casi un elemento deve essere posizionato affinché z-index funzioni.

In effetti, l'applicazione di position: relative agli elementi nella domanda probabilmente risolverebbe il problema (ma non c'è abbastanza codice fornito per saperlo con certezza).

In realtà, position: fixed, position: absolute e position: sticky abiliteranno anche z-index, ma tali valori modificano anche il layout. Con position: relative il layout non è disturbato.

In sostanza, finché l'elemento non è position: static (l'impostazione predefinita) viene considerato posizionato e z-index funzionerà.

---

Molte risposte a "Perché non è z-index di lavoro?" Le domande affermano che z-indexsolo funziona sugli elementi posizionati. A partire da CSS3, questo non è più vero.

elementi che sono flex items o grid items può usare z-index anche quando position è static.

dalle specifiche:

4.3. Flex Item Z-Ordering

articoli Flex vernice esattamente lo stesso come blocchi in linea, tranne che l'ordine documento ordine modificato è usato al posto di ordine grezzo documento e z-index valori diversi da auto creano un contesto di stacking anche se position è static.

5.4. Z-axis Ordering: the z-index property

L'ordine verniciatura di elementi della griglia è esattamente lo stesso come blocchi in linea, tranne che l'ordine documento ordine modificato viene utilizzato al posto di ordine del documento grezzo, e z-index valori diverso auto creare un contesto di stratificazione anche se position è static.

Ecco una dimostrazione di z-index lavorare sul posizionamento non-oggetti flex: https://jsfiddle.net/m0wddwxs/

Answer 4

Se si imposta grado di valore diverso static, ma non sembra ancora del z-index vostro elemento di lavorare, può essere che alcuni elemento genitore ha impostato z-index.

I contesti di impilamento hanno una gerarchia e ogni contesto di impilamento viene considerato nell'ordine di sovrapposizione del contesto di impilamento del genitore.

Quindi, con seguente codice HTML

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; } 
 
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }

<div id="el1" style="z-index: 5"></div> 
 
<div id="el2" style="z-index: 3"> 
 
    <div id="el3" style="z-index: 8"></div> 
 
</div>

non importa quanto grande sarà impostato il z-index di el3, sarà sempre sotto el1 perché è genitore ha una minore contesto di stratificazione. È possibile immaginare l'ordine di impilamento come livelli in cui l'ordine di sovrapposizione di el3 è in realtà 3.8 che è inferiore a .

Se si desidera controllare accatastamento contesti di elementi padre, è possibile utilizzare questo:

var el = document.getElementById("#yourElement"); // or use $0 in chrome; 
do { 
    var styles = window.getComputedStyle(el); 
    console.log(styles.zIndex, el); 
} while(el.parentElement && (el = el.parentElement)); 

There is a great article about stacking contexts on MDN