如何在 z-index 的同级元素下方有一个绝对定位的元素？

Question

我的布局带有内容的左侧边栏。侧边栏是绝对定位的，宽度为 200 像素，内容的左边距为 200 像素。这都是花花公子，但我刚刚开始为导航设置动画，我希望它从内容下方滑入。见小提琴。

问题是，绝对定位的侧边栏高于内容，无论将 z-index 分别设置为 1 还是 2。

将侧边栏的 z-index 设置为 -1 会使其正确滑入，但会将其置于其父级下方，从而使导航无法点击。

fiddle

<div class="parent">
  <aside class="animated fadeInRight">
    ... navigation ...
  </aside>
  <main>
    ... content ...
  </main>
</div>

如何让侧边栏从内容下方滑入，但在父级上方？

Answer 1

啊哈！我想通了。

根据w3schools...

注意： z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。

因此，只需将 position: relative 添加到 <main> 即可修复它。

Updated fiddle

Answer 2

如果添加位置：相对；到您的主框，将应用 z-index css。按照您目前的方式，z-index 不起作用，因为它需要添加位置样式。