Relatively positioned element in front of fixed element

Question

Currently I have a structure that looks like this:

<div id="header">
</div>
<div class="hook">
</div>
<div class="navbar">
</div>
<div class="content">
</div>

where the header is positioned absolutely on top, the hook is fixed, navbar positioned absolutely, and the content is positioned relatively. How can I get the hook to appear behind everything as you scroll? Currently my only trouble is with getting the content to appear in front; positioning it absolutely does the trick, but I'd like to keep it relative if possible.

Answer 1

You can combine position: relative and z-index: something-bigger-than-one . Unless I'm misunderstanding you, this should do the trick?

Here's a fugly demo :)

http://jsfiddle.net/bvaughn/mopeu8Lw/

Answer 2

By using the CSS operator;

z-index: n;

You can set its "layer", I always picture these almost like a sandwhich, I believe (but don't quote me on this), I think the way layering works by default is standard stacking, until you define them. I hope this image helps you;

You can see here that the blue element would sit on top of everything, followed by the red element, and then the black element.

http://i.stack.imgur.com/pd8iH.png