Perché z-index non funziona?

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

Voglio posizionare l'immagine in basso (il tag / card) sotto il div sopra di esso. Quindi non puoi vedere i bordi taglienti. Come faccio a fare questo?

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

o

z-index:100 // on the div above

non funziona neanche. Né una combinazione di niente del genere. Come mai?

La z-indexstruttura funziona solo su elementi con un positionvalore diverso static(ad esempio position: absolute;, position: relative;o position: fixed).

C'è anche position: sticky;che è supportato in Firefox, ha il prefisso Safari, ha funzionato per un po 'nelle versioni precedenti di Chrome con un flag personalizzato ed è in fase di esame da parte di Microsoft per aggiungerlo al proprio browser Edge.

Importante
Per un posizionamento regolare, assicurarsi di includere position: relativesugli elementi in cui è stato impostato anche z-index. Altrimenti, non avrà effetto.

Se imposti la posizione su un valore diverso da staticma l'elemento z-indexnon sembra funzionare, è possibile che sia stato z-indeximpostato un elemento padre .

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

Quindi con il seguente 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 sia il z-indexdi el3sarà impostato, sarà sempre sotto il el1perché del genitore ha contesto di stratificazione inferiore. Puoi immaginare l'ordine di sovrapposizione come livelli in cui l'ordine di sovrapposizione el3è in realtà 3,8 che è inferiore a 5 .

Se vuoi controllare i contesti di impilamento degli elementi padre, puoi usare 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));

C'è un ottimo articolo sugli stacking di contesti su MDN

I tuoi elementi devono avere un positionattributo. (ad es absolute. relative, fixed) o z-indexnon funzionerà.

In molti casi un elemento deve essere posizionato per z-indexfunzionare.

In effetti, applicare position: relativeagli elementi nella domanda probabilmente risolverebbe il problema (ma non c'è abbastanza codice fornito per saperlo con certezza).

In realtà, position: fixed, position: absolutee position: stickypermetterà anche z-index, ma quei valori cambiarne anche il layout. Con position: relativeil layout non è disturbato.

In sostanza, purché l'elemento non sia position: static(impostazione predefinita), viene considerato posizionato e z-indexfunzionerà.

Molte risposte a "Perché non funziona z-index?" le domande affermano che funziona z-index solo su elementi posizionati. A partire da CSS3, questo non è più vero.

Gli elementi che sono elementi flessibili o elementi della griglia possono essere utilizzati z-indexanche quando lo positionsono static.

Dalle specifiche:

4.3. Articolo flessibile Z-Ordering

Gli articoli Flex dipingono esattamente come i blocchi incorporati, tranne per il fatto che l'ordine di documento modificato dall'ordine viene utilizzato al posto dell'ordine di documento non elaborato e z-indexvalori diversi dalla autocreazione di un contesto di sovrapposizione, anche se lo positionè static.

5.4. Ordinazione dell'asse Z: la z-indexproprietà

L'ordine di disegno degli elementi della griglia è esattamente lo stesso dei blocchi incorporati, tranne per il fatto che l'ordine di documento modificato dall'ordine viene utilizzato al posto dell'ordine di documento non elaborato e z-indexvalori diversi dalla autocreazione di un contesto di sovrapposizione anche se lo positionè static.

Ecco una dimostrazione di come z-indexlavorare su oggetti flessibili non posizionati: https://jsfiddle.net/m0wddwxs/