raise the z-index over prependTo div
<p>I am having difficulty getting one of the page divs to display over a temporarily prepended div.</p>

<p>The div i want to keep at the fore at all times is .outer_box</p>

<p>The Jquery:</p>

<pre><code>$(document).ready(function() {


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


});
</code></pre>

<p>The CSS:</p>

<pre><code>.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;
}
</code></pre>

<p>The HTML:</p>

<pre><code>&lt;div class="outer_box"&gt;
    &lt;div class="inner_box"&gt;
    &lt;span style="color:#fff;"&gt;Content here&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
