5

想象一下这个 DOM：

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

<div>
    content
</div>

header 和 nav 都定位为fixed. 内容 div 定位为relative. 我需要按以下顺序（从上到下）创建一个带有 z-index 的堆栈：

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

我很难将 nav 放在底部（换句话说，在其父母的兄弟姐妹之下）。我在想所有标题的孩子都必须在其兄弟姐妹之上或之下......这是对的吗？如果是这样，是否有解决这种情况的方法？

4

2 回答 2

5

只有“定位”的内容，例如position: absoluteorposition: fixed或position: relative才会尊重z-index. 由于您的 HTML 是结构化的，因此您无法执行您要求的操作，因为父母/孩子也受到尊重，因此孩子必须在父母中（它不能是完全不同的 z-index 与父母） . 为了做你想做的事，你必须打破它们nav，header然后它们可以各自拥有自己的z-index，一个高于和低于默认的零 z-index 内容。

于 2013-01-20T21:53:34.687 回答
0

对于 DOM 布局，唯一的解决方法是使用负 z-index 值。但是，不强烈建议使用负值，就像不建议使用负边距值一样。

更好的解决方案是重构 DOM。您可能会发现这很有用。它解释了使用 z-index 属性的推荐方法。

希望这对你有帮助！

于 2013-01-20T21:55:23.110 回答