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?
Stacking Context
.position: relative
że indeks z ma działać, mimo że elementy domyślnie zachowują się w inny względny sposóbstatic
elementy są statyczne i nie mogą się poruszaćx, y or z planes
. Nie mogą się wprowadzaćx plane (left or right)
aniy plane (top or bottom)
lubić, kiedy pracujemyposition: absolute
. I nie mogą też poruszać się wz plane i.e. with z-index
.z-index
w elemencie siatki?Jeśli ustawisz pozycję na inną wartość niż,
static
ale elementz-index
nadal nie działa, może być tak, że jakiś element nadrzędny zostałz-index
ustawiony.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
Nie ważne jak duży
z-index
ofel3
zostanie ustawiony, to zawsze będzie podel1
bo to rodzic ma niższą kontekst stosu. Możesz wyobrazić sobie kolejność układania jako poziomy, na których kolejność układaniael3
wynosi 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:
Jest świetny artykuł o zestawianiu kontekstów na MDN
źródło
Twoje elementy muszą mieć
position
atrybut. (npabsolute
,relative
,fixed
) lubz-index
nie będzie działać.źródło
W wielu przypadkach element musi być ustawiony,
z-index
aby działał.Rzeczywiście, zastosowanie
position: relative
się 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: absolute
iposition: sticky
umożliwi równieżz-index
, ale te wartości również zmienić układ. Dziękiposition: relative
układowi nie przeszkadza.Zasadniczo, o ile element nie jest
position: static
(ustawienie domyślne), jest uważany za ustawiony iz-index
bę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-index
nawet wtedy, gdyposition
sąstatic
.Ze specyfikacji:
Oto demonstracja
z-index
pracy z niepozycjonowanymi elementami elastycznymi: https://jsfiddle.net/m0wddwxs/źródło
position: static
dokładnie to samo, co wposition: relative
przypadku 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.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 )overflow-y: scroll
nieoverflow-x: visible
działa ... czy możesz rzucić okiem?