css positioning z-index negative margins
I have the following html - no matter what i do I cant seem to get the middle div to appear on top of the top and also on top of the bottom. It sits fine above the top but where i'd be expecting the bottom to sit below the middle the bottom actually sits on top. Any ideas ? Jsfiddle link below also .. thanks in advance !
<body>
<div>
<div id="tdiv" >Top Div</div>
<div id="connector">Middle Didv</div>
<div id="bdiv">Bottom Div </div>
</div>
开发者_JAVA技巧 </body>
#tdiv{
height:200px; border:10px dotted black ;
margin-bottom: -100px;
background:red;
}
#connector{
height:200px;border:10px solid black;
background:blue;
margin-bottom: -100px;
z-index: 21;
}
#bdiv{
border:21px dashed black;
height:200px;
z-index: 1;
background:green;
}
http://jsfiddle.net/EWkMA/29/
z-index is useless on a static positioned element. try position:relative. if negative margins don't work out for you, use top or bottom and negative values.
You need to specify position:
#connector{
position:relative;
height:200px;border:10px solid black;
background:blue;
margin-bottom: -100px;
z-index: 21;
}
If you mean "on top" by hiding the first one while seeing the second, you should add "position:absolute" If you mean by order, you can use the following lines:
var d = getElementById("..."); var p = d.parentNode; p.removeChild(d);
and than add to index, or add all of them anew in the required order.
加载中,请稍侯......
精彩评论