css定位z-index负边距
我有以下 html - 无论我做什么，我似乎都无法让中间的 div 出现在顶部和底部的顶部。它位于顶部上方，但我期望底部位于中间下方，但底部实际上位于顶部。有什么想法吗？下面还有 Jsfiddle 链接..提前致谢！
<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;
}
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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
z-index对于静态定位元素来说是无用的。尝试位置：相对。如果负边距不适合您，请使用top或bottom以及负值。z-indexis useless on a static positioned element. tryposition:relative. if negative margins don't work out for you, usetoporbottomand negative values.您需要指定
位置：You need to specify
position:如果您的意思是“在顶部”，即隐藏第一个而看到第二个，则应添加“位置：绝对”
如果您是指顺序，则可以使用以下行：
var d = getElementById("...");
var p = d.parentNode;
p.removeChild(d);
然后添加到索引，或者按所需的顺序重新添加所有内容。
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.