CODEWITHSUNDEEP
htmlcsspositioningz-index
Andrei Stanca
Andrei Stanca

Reputation: 908

css positioning (z-index) element behind element

I'm trying to make the following html/css layout:

http://siteique.com/uploads/1.png http://siteique.com/uploads/1.png .

My problem is with the blue lines behind the main div.

<div id="container">
    <!-- blue line 1 -->
    <div style="width:100%; height:60px; background-color:#81b7ff; position:absolute; top:385px; z-index:1; float:left;"></div>

    <div id="site">
    </div>

    <div id="footer">
        <!-- blue line 2 -->
        <div style="position:relative; bottom:0px; height:200px; width:100%; z-index:1;"></div>
    </div>
</div>

The problem is that if I make the #site div position:absolute and z-index:2 the #footer won`t be in the position I want.

So what is the trick I need?

I'm trying to position the blue div's behind the white div #site

Upvotes: 2

Views: 11506

Answers (1)

feeela
feeela

Reputation: 29942

The problem is that if I make #site position:absolute and z-index:2…

If you just want to influence the stacking-context by adding a new layer, position: relative; would be appropriate and keeps the element flowing.

Please note also, that the »blue line 2« has a different stacking context then »blue line 1«, because the former is nested inside one more layer (#footer) then the latter.

See also:

Upvotes: 4

Related Questions