div with absolute position behind the normal flow

Question

i am trying to get a div to be my background and am using absolute positioning to achieve it. everything works fine except for the fact that it appears above anything in the normal flow and fiddling with z-indexes does absolutely nothing.

<div id="blind">
<div id="blindbackground"></div>
<div id="blindcontainer"><div class="loader"><img class='loader' src="/img/loader.gif"/></div></div>
<div id="blindclosecontainer"><img id='blindclose' src="/img/close.gif"/></div>
</div>

and this is the css:

#blind{
    position :absolute;
    width:100%;
    z-index: 2;
    border-bottom: 1px silver solid;
}
#blindclosecontainer{
    text-align: right;
}

#blindbackground{
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    background-color: white;
    filter:alpha(opacity=60);
    opacity:0.6;
}
#blindcontainer{
    margin:auto;
    width:500px;
    background-color: white;
    padding:10px;
}

.loader{
    margin: auto;
    width:18px;
    margin-top:10px;
    margin-bottom: 5px;
}

Answer 1

Add position:relative; to the #blindcontainer and #blindclosecontainer classes.

Answer 2

Start with this simple markup:

<div id="blind" style="position: relative;">
  <!-- create a canvas on which you absolute position other items -->
  <div id="blindbackground"     style="position: absolute; top: 0; left:  0; z-index: 1;"></div>
  <div id="blindcontainer"      style="position: absolute; top: 0; left:  0; z-index: 2;"></div>
  <div id="blindclosecontainer" style="position: absolute; top: 0; right: 0; z-index: 3;"></div>
</div>

This will create three layers. Once you get the positioning and layer order correct, move inline styles to CSS and add other markup.

Answer 3

stackoverflow is not for web development questions go to doctype for that (read the FAQ)