0

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?

savinger
  • 6,544
  • 9
  • 40
  • 57

2 Answers2

1

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

savinger
  • 6,544
  • 9
  • 40
  • 57
0

If you add position: relative; to your main box, the z-index css will be applied. The way you currently have it, the z-index is not working because it needs to have a position style added to it.

Brad Schvaneveldt
  • 51
  • 2