html - 我怎样才能在其具有 z-index 的兄弟元素下方放置一个绝对定位的元素？

Question

我有一个带有内容左侧边栏的布局。侧边栏是绝对定位的，宽度为 200px，内容的 margin-left 为 200px。这就是花花公子，但我刚刚开始制作导航动画，我希望它从内容下方滑入。参见 fiddle 。

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

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

fiddle

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

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

Answer 1

啊哈!我已经弄明白了。

根据 w3schools ...

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

所以只需将 position: relative 添加到 <main>修复它。

Updated fiddle