Z-index: uczynić elementem iść pod rodzeństwa jego rodzica

Question

Wyobraźmy sobie tę DOM:

<header> 
    <h1> header </h1> 
    <!-- other elements --> 
    <nav> 
     nav 
    </nav> 
</header> 

<div> 
    content 
</div> 

Zarówno nagłówek i nav są ustawione jako fixed. Element div jest ustawiony jako relative. muszę utworzyć stos, z-index, w tej kolejności (od góry do dołu):

• nagłówek *: not (NAV)
• zawartość
• nav

Mam trudności z umieszczeniem nav na dole (innymi słowy, pod rodzicielskim rodzeństwem). Myślę, że wszystkie dzieci z nagłówka muszą być na górze lub pod jego rodzeństwem ... czy to prawda? Jeśli tak, czy istnieje obejście tego problemu?

Answer 1

Tylko treść, która jest „ustawiony”, takich jak position: absolute lub position: fixed lub position: relative będzie respektować z-index. Ponieważ struktura HTML jest ustrukturyzowana, nie możesz zrobić tego, o co prosisz, ponieważ rodzic/dziecko jest również szanowany, więc dziecko musi być w rodzicu (nie może to być zupełnie inny indeks z-z vs. rodzicem) . Aby zrobić to, co chcesz, będziesz musiał zerwać nav z header, a następnie każdy z nich może mieć swój własny z-index, jeden powyżej i jeden poniżej domyślnego z-index zawartości.

Answer 2

Jedynym sposobem obejścia tego problemu z układem DOM jest użycie ujemnych wartości z-index. Nie zaleca się jednak stosowania wartości ujemnych, podobnie jak nie zaleca się stosowania ujemnych wartości marginesów.

Lepszym rozwiązaniem byłoby zrestrukturyzowanie DOM. Przydatne może okazać się this. Wyjaśnia zalecane sposoby korzystania z właściwości z-index.

Mam nadzieję, że to pomoże!