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.