{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 狗以群分 的问题《css positioning z-index negative margins》','https://www.manongdao.com/q-516309.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>
</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;
}
You need to specify
position: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.
z-indexis useless on a static positioned element. tryposition:relative. if negative margins don't work out for you, usetoporbottomand negative values.