Question

我有一个简单的设置，我有一个汉堡包样式菜单，可以启用一个滑动菜单（something like this），将主要内容滑动到右边。

<div class="layout-wrapper" >
    <div class="layout-menu"></div>

    <header class="layout-header"></header>

    <div class="layout-content"></div>
</div>

所以我有一个容器div：layout-wrapper。

我有菜单：layout-menu，具有绝对定位，因此我可以将主要内容放在其上。

我有标题：layout-header，具有固定的定位，以便在滚动内容时它始终保持在顶部

我有内容：layout-content。

我的问题是layout-content不可见，除非我向其添加position: relative。为什么我要这样做？我犯了一个愚蠢的错误吗？

这是显示问题的plunker。启用CSS中的注释行，以查看应该的外观。

Answer 1

这是因为元素需要position属性而不是static（，这是默认的）才能使z-index属性起作用。这意味着它不仅适用于position: relative。它也适用于position: absolute和position: fixed。

的 Give this a read to understand z-index better

Answer 2

这不是一个错误，您必须为position: relative设置layout-content，以便它可以重叠layout-menu。

在您的Off Canvas菜单示例中，内容也有position: relative。

Answer 3

问题是.layout-menu是定位元素：

.layout-menu {
    position: absolute;
}

但.layout-content不是：

.layout-content {
    position: static; /* default value */
}

根据CSS 2.1 spec，

每个框属于一个堆叠上下文。给定堆叠中的每个框   context有一个整数堆栈级别，它就是它的位置   相对于同一堆叠上下文中的其他框的z轴。盒   更高的堆栈级别始终在框的前面格式化   较低的堆栈级别。 [...]

每个堆叠上下文包含以下堆叠级别（来自   回到前面）：


形成堆叠的元素的背景和边界   上下文。

具有负堆栈级别的后代的堆叠上下文。

包含流入非内联级后代的堆叠级别。

浮子及其内容的堆叠等级。

流入内联级后代的堆叠级别。

已定位后代的堆叠级别，其中包含＆＃39; z-index：auto＆＃39;以及任何带有＆＃39; z-index的后代堆叠上下文：0＆＃39;。

具有正堆栈级别的后代的堆叠上下文。

这意味着.layout-menu位于堆叠级别6，将显示在.layout-content的前面，该值位于堆叠级别3中。

但是，如果你使用

.layout-content {
    position: relative;
}

现在.layout-content也会落入堆叠级别6。

然后，

堆叠上下文中具有相同堆栈级别的框根据文档树顺序从前到后堆叠。

因此，由于.layout-content位于文档树中.layout-menu之后，.layout-content将显示在.layout-menu之前。

CSS定位绝对需要兄弟元素的相对位置

3 个答案: