Z-index:使元素进入其父级的同级对象下 [英] Z-index: make element go under its parent's sibling

问题描述

想象一下这个DOM:

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

<div>
    content
</div>

标头和导航都定位为 fixed .内容div定位为相对.我需要按此顺序(从上到下)创建一个带有z-index的堆栈:

Both header and nav are positioned as fixed. The content div is positioned as relative. I need to create a stack, with z-index, in this order (from top to bottom):

• 标题*:not(nav)
• 内容
• 导航

我很难把nav放在最下面(换句话说，就是它的父母的兄弟姐妹).我认为所有标头的孩子都必须位于其兄弟姐妹的上方或下方...对吗?如果是这样，是否有针对这种情况的解决方法?

I'm having a hard time putting nav in the bottom (in other words, under its parent's sibling). I'm thinking that all header's children have to go either on top or under its sibling... is this right? If so, is there a workaround for this situation?

推荐答案

仅定位"的内容，例如 position:绝对或 position:固定或 position:relative 将遵守 z-index .由于HTML是结构化的，因此您无法执行您要的操作，因为父母/孩子也受到尊重，因此孩子必须在父母中(z-index与父母不能完全不同).要执行您想要的操作，您必须将 nav 从 header 中分离出来，然后它们各自可以具有自己的 z-index ，内容的默认零Z-index上方为1，下方为1.

Only content that is "positioned" such as position: absolute or position: fixed or position: relative will respect the z-index. As your HTML is structured, you can't do what you're asking for because parent/child is also respected so a child has to be in the parent (it can't be a completely different z-index vs. the parent). To do what you want, you will have to break the nav out of the header and then they can each have their own z-index, one above and one below the default zero z-index of content.

这篇关于Z-index:使元素进入其父级的同级对象下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！