z-index - Absolute element inbetween two others

Question

I have a problem understanding z-index properly.

Please have a look at this fiddle I created for you: http://jsfiddle.net/df3EL/

<div id="content">    
    1. Content

    <div id="popup">
        3. PopUp
    </div>
</div>

<div id="footer">
    2. Footer
</div>

I'm aware of positioning and opacity influencing z-index. But with this markup, no matter what I try, the footer is above 1 & 3 or below - never in between.

Is there any way to make the order (1, 2, 3) work, without changing the html markup?

Answer 1

z-index inherits from the parent element

So if your 1 element has a z-index of 100, your 3 element cannot exceed that value in the global scope. In the local scope (within the #content element), the z-index will essentially "reset"

So to make your thing work, you'll need to change the HTML markup to make each element independent (so they can have sequential z-index in the global scope)

Answer 2

if you want popup be hover footer, just set index for footer and popup : http://jsfiddle.net/df3EL/1/

div {
    font-family: Verdana;
    font-size: 11px;
    padding: 20px;
}

div#content {
    display: block;
    height: 150px;
    width: 250px;
    background: #eee;
    position: relative;
}

div#footer {
    display: block;
    height: 50px;
    width: 250px;
    background: #eeefc0;
    position: relative;
    left: 25px;
    top: -25px;
    z-index: 1;
}

div#popup {
    display: block;
    height: 140px;
    width: 100px;
    background: #C0C0EF;
    position: relative;
    left: 220px;
    top: -5px; 
    z-index: 2;
}

Answer 3

[http://jsfiddle.net/df3EL/3/][1]

Remove all z-index property except div#popup It should work in modern browser (suppose ie9+, chrome, opera, FF)

But more logical way move #popup after #footer (may be it should do with javascript when needed to show popup)

Answer 4

You have used position:relative for div#footer and div#popup. Change this to position: absolute and change the vaules top, bottom, left,right to get the desired result.

By this you won't have to change your html structure.