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

Question

我有一个带有内容左侧边栏的布局。边栏是绝对定位的，宽度为200px，内容的边距为200px。这很不错，但我刚开始制作导航动画，我希望它能从内容下面滑入。见小提琴。

问题是，无论z索引分别设置为1和2，绝对定位的侧边栏都位于内容上方。

将侧边栏的z索引设置为-1可以使其正确地滑入，但会将其放置在其父项下，从而使导航不可点击。

小提琴

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

我如何让侧边栏从内容的下面滑入，但在父项的上面？

Answer 1

啊哈！我已经想通了。

根据w3schools。。。

注意：z索引仅适用于已定位的元素（位置：绝对、位置：相对或位置：固定）。

因此，只需在<main>中添加position:relative就可以修复它

更新的fiddle

Answer 2

如果添加位置：relative；将z索引css应用于主框。按照目前的方式，z索引不起作用，因为它需要添加一个位置样式。