Changing z-index disables links

[ratherbcoding]

I’m having a problem creating a sidebar with some links on it and having it positioned. I need to position my sidebar just under my header bar so that the trim underneath it makes it appear as if the sidebar is sitting under by header bar. I do this using absolute positioning and z-index, but when I do this, it renders my links inert, as if something is covering them, and no amount of fiddling with z-index or pointer-events seems to help.

Can anyone help me position my sidebar so it renders right and still has hover/links on it?

Here is the codepen link: http://codepen.io/ksefchik/pen/Wrqqoz

[bearhead]

Its seems like you should be able to position user-mgmt relatively with a z-index of like 10, and then just remove the z-index:-1 on the menu.

http://codepen.io/kvana/pen/EPBBzP

Or is there something I’m missing that won’t let that work in context?

[ratherbcoding]

This works brilliantly! How did you know to use relative?

[bearhead]

z-index only applies to elements that are positioned relatively, fixed or absolutely.

z-index:-1; can be a little goofy, so it made sense to bring the header in front of the navigation, instead of trying to put the navigation behind everything.

[ratherbcoding]

Thank you so much for your help and knowledge! :3

[Author]

Posts