Dlaczego z-index nie działa?

Question

Więc jeśli dobrze rozumiem z-index poprawnie, to byłoby idealne w tej sytuacji:

chcę umieścić dolną obrazu (tag/karty) poniżej div nad nim. Więc nie widać ostrych krawędzi. Jak mam to zrobic?

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

lub

z-index:100 // on the div above 

nie działa albo. Nie ma też kombinacji czegoś podobnego. Dlaczego?

Answer 1

Właściwość z-index działa tylko na elementy o position wartość inną niż static (np position: absolute;, position: relative; lub position: fixed).

Istnieje również position: sticky;, który jest obsługiwany w Firefoksie, jest wstępnie w Safari, pracował przez pewien czas w starszych wersjach Chrome pod niestandardową flagą i jest rozważany przez Microsoft, aby dodać do swojej przeglądarki krawędzi.

Answer 2

Twoje elementy muszą mieć atrybut pozycji. (bezwzględny, względny, ustalony) lub indeks Z nie będzie działać

Answer 3

W wielu przypadkach element musi być ustawiony, aby z-index zadziałał.

Rzeczywiście, zastosowanie position: relative do elementów w pytaniu prawdopodobnie rozwiąże problem (ale nie ma wystarczającej ilości kodu, aby wiedzieć na pewno).

W rzeczywistości position: fixed, position: absolute i position: sticky również będą zezwalać na z-index, ale te wartości również zmieniają układ. Z position: relative układ nie jest zakłócany.

Zasadniczo, o ile element nie jest position: static (ustawienie domyślne), uznaje się go za pozycjonowany i działa z-index.

---

Wiele odpowiedzi na "Dlaczego nie działa indeks Z?" pytania potwierdzają, że z-indextylko działa na pozycjonowanych elementach. Od wersji CSS3 nie jest to już prawda.

elementów, które są flex items lub grid items można korzystać nawet wtedy, gdy positionz-index jest static.

Od specyfikacji:

4.3. Flex Item Z-Ordering

Flex elementy pomalować dokładnie taka sama jak bloki inline, z wyjątkiem tej kolejności modyfikowany kolejności dokumentu jest używany zamiast surowego kolejności dokumentu i z-index wartości inne niż auto tworzą kontekst stosowy, nawet jeśli position to static.

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

Kolejność malowanie elementów sieci jest dokładnie taka sama jak bloki inline, z wyjątkiem tej kolejności modyfikowany kolejności dokumentu jest używane zamiast surowej kolejności dokumentu i z-index wartości inne niż auto stworzyć kontekst stosu nawet jeśli position jest static.

Oto demonstracja z-index działa na nie-pozycjonowanych Flex elementów: https://jsfiddle.net/m0wddwxs/

Answer 4

Jeśli stanowisko do innej wartości ustawić niż static ale nadal nie wydaje swoją elementu z-index do pracy, może się okazać, że niektóre element macierzysty ma zestaw z-index.

Kontury układania mają hierarchię, a każdy kontekst stosu jest rozpatrywany w kolejności układania w stosowym kontekście rodzica.

Więc z następujący kod 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>

bez względu na to, jak duża będzie ustawić z-index z el3, to zawsze będzie pod el1 bo to rodzic ma niższą kontekst układania. Można sobie wyobrazić kolejność układania jako poziomy, w których kolejność ustawiania w stosy wynosząca el3 jest w rzeczywistości równa 3.8 niższa niż .

Jeśli chcesz sprawdzić układania kontekstów elementów nadrzędnych, można użyć to:

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