CODEWITHSUNDEEP
htmlcss
user3026874
user3026874

Reputation: 25

Relatively positioned element in front of fixed element

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.

Upvotes: 0

Views: 1154

Answers (2)

Richard Goodman
Richard Goodman

Reputation: 15

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.

https://i.sstatic.net/pd8iH.png

Upvotes: 0

bvaughn
bvaughn

Reputation: 13487

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/

Upvotes: 1

Related Questions