raise the z-index over prependTo div

Question

Hi All, I am having difficulty getting one of the page divs to display over a temporarily prepended div.

The div i want to keep at the fore at all times is .outer_box

The Jquery:

$(document).ready(function() {


$("<div/>", {
  "class": "DooSuperOverlay"
})
.prependTo("body")
.animate({opacity: 1.0}, 3000)
.fadeOut("slow");


});

The CSS:

.DooSuperOverlay {
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    background-color:#000;
    z-index:5000;
    }


.outer_box {
    z-index:10000;
}

.inner_box {
    z-index:10000;
}

The HTML:

<div class="outer_box">
    <div class="inner_box">
    <span style="color:#fff;">Content here</span>
    </div>
</div>

Answer 1

add a position:absolute to the outer_box class. http://jsfiddle.net/brianflanagan/AAT9w/