Dlaczego indeks Z nie działa?

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

Chcę umieścić dolny obraz (tag / kartę) poniżej elementu 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

też nie działa. Nie ma też połączenia czegoś takiego. Dlaczego?

z-indexWłasność działa tylko na elementy o positionwartości innej niż static(np position: absolute;, position: relative;lub position: fixed).

Jest również position: sticky;obsługiwany w przeglądarce Firefox, ma prefiks w Safari, działał przez pewien czas w starszych wersjach Chrome pod niestandardową flagą i jest rozważany przez Microsoft, aby dodać go do przeglądarki Edge.

Ważne
Aby zapewnić regularne pozycjonowanie, pamiętaj o uwzględnieniu position: relativeelementów, w których również ustawiłeś z-index. W przeciwnym razie nie odniesie skutku.

Jeśli ustawisz pozycję na inną wartość niż, staticale element z-indexnadal nie działa, może być tak, że jakiś element nadrzędny został z-indexustawiony.

Konteksty stosowe mają hierarchię, a każdy kontekst stosowy jest rozpatrywany w kolejności stosu kontekstu stosowego rodzica.

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

Nie ważne jak duży z-indexof el3zostanie ustawiony, to zawsze będzie pod el1bo to rodzic ma niższą kontekst stosu. Możesz wyobrazić sobie kolejność układania jako poziomy, na których kolejność układania el3wynosi w rzeczywistości 3,8, czyli mniej niż 5 .

Jeśli chcesz sprawdzić konteksty układania elementów nadrzędnych, możesz użyć tego:

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));

Jest świetny artykuł o zestawianiu kontekstów na MDN

Twoje elementy muszą mieć positionatrybut. (np absolute, relative, fixed) lub z-indexnie będzie działać.

W wielu przypadkach element musi być ustawiony, z-indexaby działał.

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

Właściwie position: fixed, position: absolutei position: stickyumożliwi również z-index, ale te wartości również zmienić układ. Dzięki position: relativeukładowi nie przeszkadza.

Zasadniczo, o ile element nie jest position: static(ustawienie domyślne), jest uważany za ustawiony i z-indexbędzie działał.

Wiele odpowiedzi na pytanie „Dlaczego indeks Z nie działa?” pytania twierdzą, że działa z-index tylko na pozycjonowanych elementach. Od wersji CSS3 nie jest to już prawdą.

Elementy, które są elementami elastycznymi lub elementami siatki, mogą być używane z-indexnawet wtedy, gdy positionsą static.

Ze specyfikacji:

4.3. Zamawianie elementów elastycznych Z.

Elementy Flex malują dokładnie tak samo, jak bloki w wierszu, z tą różnicą, że zamiast pierwotnej kolejności dokumentów jest używana kolejność dokumentów o zmodyfikowanej kolejności, a z-indexwartości inne niż autotworzą kontekst układania, nawet jeśli positionjest static.

5.4. Porządkowanie osi Z: z-indexwłaściwość

Kolejność malowania elementów siatki jest dokładnie taka sama, jak w blokach wbudowanych, z wyjątkiem tego, że zamiast kolejności dokumentów surowych używana jest kolejność dokumentów o zmodyfikowanej kolejności, a z-indexwartości inne niż autotworzą kontekst układania, nawet jeśli positionjest static.

Oto demonstracja z-indexpracy z niepozycjonowanymi elementami elastycznymi: https://jsfiddle.net/m0wddwxs/