Z-Index: Element unter seinen Eltern Geschwister machen geht

Question

diesen DOM Stellen Sie sich vor:

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

<div> 
    content 
</div> 

Sowohl Kopf- und nav als fixed positionieren. Der Inhalt div wird als relative positioniert. Ich brauche einen Stapel, mit z-Index, in dieser Reihenfolge (von oben nach unten) zu erstellen:

• Header *: nicht (nav)
• Inhalt
• nav

Mir fällt es schwer, Nav in den Boden zu legen (mit anderen Worten, unter die Geschwister der Eltern). Ich denke, dass alle Kinder des Headers entweder oben oder unter seinem Geschwister gehen müssen ... ist das richtig? Wenn ja, gibt es einen Workaround für diese Situation?

Answer 1

Nur Inhalte, die "positioniert" sind, wie position: absolute oder position: fixed oder position: relative, entsprechen der z-index. Da Ihr HTML strukturiert ist, können Sie nicht das tun, wonach Sie fragen, weil Eltern/Kind auch respektiert wird, so dass ein Kind im Elternteil sein muss (es kann kein ganz anderer Z-Index sein als der Elternteil) . Um zu tun, was Sie wollen, müssen Sie die nav aus der header brechen und dann können sie ihre eigenen z-index, eine über und eine unter dem Standard-Zero-Z-Index des Inhalts haben.

Answer 2

Die einzige Problemumgehung dafür mit Ihrem DOM-Layout besteht darin, negative Z-Indexwerte zu verwenden. Es wird jedoch nicht empfohlen, einen negativen Wert zu verwenden, genauso wie es nicht empfohlen wird, negative Randwerte zu verwenden.

Eine bessere Lösung wäre, Ihr DOM zu restrukturieren. Sie können this nützlich finden. Es erläutert die empfohlenen Arten der Verwendung der Z-Index-Eigenschaft.

Hoffe das hilft dir!