CODEWITHSUNDEEP
css
camomileCase
camomileCase

Reputation: 1706

z-index ignored: 2 fixed divs, 1 of them in a position relative div

I had a hard title coming up with a title. I'm having trouble with the twitter bootstrap overlay appearing on top of a modal window, I'm able to illustrate my problem with the below html. I've also provided a jsfiddle.

<div style="position: relative; z-index: 1;">
    <div style="background: blue; position: fixed; z-index: 3;">
    </div>
</div>
<div style="background: green; position: fixed; z-index: 2; top: 0">
</div>​

How can I get the blue div to appear on top of the green div? Why is the green div on top of the blue div?

Upvotes: 1

Views: 3813

Answers (1)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Hi now used to this demo http://jsfiddle.net/rohitazad/UnTvQ/5/

Define top div z-index

<div style="position: relative; z-index: 3;">
    <div style="background: blue; position: fixed;">
    </div>
</div>
<div style="background: green; position: fixed; z-index: 2; top: 20px; left:10px;">
</div>

Live demo

Learn more about How to work z-index link here

Upvotes: 4

Related Questions