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

Question

我有一个简单的设置，我有一个汉堡包样式的菜单，可以启用一个关闭的 canvas 菜单 (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，具有绝对定位，因此我可以将主要内容放在上面。

我有 header: layout-header，具有固定的定位，因此当我滚动内容时它始终保持在顶部

我有内容：layout-content.

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

这里 plunker 显示了问题。启用 CSS 中的注释行以查看它应该的样子。

Answer 1

这是因为对于 z-index 属性上班。这意味着它不仅适用于 position: relative。它也适用于 position: absolute 和 position: fixed。

Give this a read to understand z-index better

Answer 2

这不是错误，您必须为 layout-content 设置 position: relative，以便它可以重叠 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，

Each box belongs to one stacking context. Each box in a given stacking context has an integer stack level, which is its position on the z-axis relative to other boxes in the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. [...]

Each stacking context consists of the following stacking levels (from back to front):

the background and borders of the element forming the stacking context.

the stacking contexts of descendants with negative stack levels.

a stacking level containing in-flow non-inline-level descendants.

a stacking level for floats and their contents.

a stacking level for in-flow inline-level descendants.

a stacking level for positioned descendants with 'z-index: auto', and any descendant stacking contexts with 'z-index: 0'.

the stacking contexts of descendants with positive stack levels.

也就是说，属于第6层堆叠的.layout-menu会显示在属于第3层堆叠的.layout-content之前

但是，如果您使用

.layout-content {
    position: relative;
}

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

然后，

Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.

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

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

CSS positioning absolute requires relative position for sibling element

css

css-position