div with absolute position behind the normal flow
Posted
by vasion
on Stack Overflow
See other posts from Stack Overflow
or by vasion
Published on 2010-05-11T07:36:20Z
Indexed on
2010/05/11
8:14 UTC
Read the original article
Hit count: 230
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;
}
© Stack Overflow or respective owner