Dlaczego indeks Z nie działa?

182

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

wprowadź opis obrazu tutaj

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?

Linkjuice57
źródło

Odpowiedzi:

435

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.

Wynicować
źródło
3
dodając do tej odpowiedzi, chrome i prawdopodobnie inne przeglądarki w chwili pisania tego tekstu wymagają wyraźnego stwierdzenia, position: relativeże indeks z ma działać, mimo że elementy domyślnie zachowują się w inny względny sposób
benipsen
staticelementy są statyczne i nie mogą się poruszać x, y or z planes. Nie mogą się wprowadzać x plane (left or right)ani y plane (top or bottom)lubić, kiedy pracujemy position: absolute. I nie mogą też poruszać się w z plane i.e. with z-index.
Akash
czy wiesz o jakichkolwiek problemach z używaniem z-indexw elemencie siatki?
oldboy
60

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

Buksy
źródło
jak to naprawić?
SM Pat
3
ustawić odpowiedni indeks z elementów nadrzędnych.
Buksy
uwielbiam ten scenariusz
Matoeil
31

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

clem
źródło
26

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 positionstatic.

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/

Michael Benjamin
źródło
3
„Elementy, które są elementami elastycznymi lub siatkami, mogą używać indeksu z nawet wtedy, gdy pozycja jest statyczna”. Tak, specyfikacja zasadniczo mówi, że należy traktować position: staticdokładnie to samo, co w position: relativeprzypadku elementów elastycznych i siatkowych ze względu na dynamiczną naturę tych metod układu. Więc może powiedziałbym, że nie jest już prawdą w CSS3, że element musi być pozycjonowany, ale że CSS3 traktuje elementy flex i grid tak, jakby były pozycjonowane, niezależnie od tego. Jednak prawdopodobnie tylko dwa sposoby patrzenia na to samo.
TylerH
@TylerH powinniśmy zwrócić uwagę na tę część specyfikacji, ponieważ statyczne powinniśmy traktować tak samo jak względne tylko wtedy, gdy mamy do czynienia z indeksem z, a nie ogólnie. Nie możesz na przykład przesuwać elementu elastycznego za pomocą lewego / górnego / dolnego / prawego, chyba że wyraźnie sprecyzujesz position:relative. Potomkowie elementów elastycznych z pozycją bezwzględną nie będą traktować elementu elastycznego jako bloku zawierającego, ponieważ element elastyczny nie jest ustawiony. ( jsfiddle.net/0yo7utfL/2 )
Temani Afif
Znalazłem dziwny "błąd" w CSS. z jakiegoś powodu overflow-y: scrollnie overflow-x: visibledziała ... czy możesz rzucić okiem?
oldboy