tags:

views:

22

answers:

1

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>
A: 

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

Brian Flanagan
If you want to show like a popup , the outer_box should have higher z-index right.
gov
I think it does - outer_box is set to 10000 and the .DooSuperOverlay is set to 5000. Am I missing something?
Brian Flanagan
inner box and outer box zindex is same, give outerbox a number greater
gov
It worked out by giving the inner and outer position:relative
Doobox
See a demo here Demo of the final result http://www.doobox.co.uk/test/test.html
Doobox
dont forget to wait three seconds..!
Doobox