Q:

How can I have an absolutely positioned element underneath it's sibling with z-index?

I've got a layout with a left sidebar to the content. Sidebar is absolutely positioned, width 200px, and content has a margin-left of 200px. That's all dandy, but I just began animating the navigation, I would like it to slide in from underneath the content. See fiddle.
Problem is, the absolutely positioned sidebar is above the content, regardless of setting the z-indexes to 1 and 2, respectively.
Setting the sidebar's z-index to -1 has it slide in correctly, but places it underneath it's parent, making navigation unclickable.
fiddle
<div class="parent">
  <aside class="animated fadeInRight">
    ... navigation ...
  </aside>
  <main>
    ... content ...
  </main>
</div>

How do I have the sidebar slide in from underneath the content, but above the parent?

A:

Aha! I've figured it out.
As per w3schools...

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

So simply adding position: relative to the <main> fixes it.
Updated fiddle

