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

Question

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

问题是，绝对定位的侧边栏高于内容，无论将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仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

只需将位置：相对添加到<main>即可。

Updated fiddle

Answer 2

如果添加position：relative;在您的主框中，将应用z-index css。你现在拥有它的方式，z-index不起作用，因为它需要添加一个位置样式。