z-index 的行为不符合预期：数据堆叠和隐藏
下面的代码演示了我正在尝试做的事情。为什么我的“blackOut”div 出现在“theGoods”div 前面？ z-index 不应该正确处理这个问题吗？
<html>
<head>
<style>
table.theGoods{
display:block;
z-index:20;
background-color:yellow;
font-family:arial;
font-size:18px;
width:300px;
height:300px;
margin-right:auto;
margin-left:auto;
margin-top:180px;
text-align:center;
}
div.blackOut{
position:absolute;
background-color:red;
width:100%;
height:100%;
padding:0px;
top:0px;
left:0px;
z-index:2;
}
div.behindIt{
z-index:1;
background-color:red;
}
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
</head>
<body>
<table class="theGoods" id="theGoods">
<tr>
<th>
la la
</th>
</tr>
</table>
<div class="blackOut" id="blackOut" onClick="myHider(event)"></div>
</body>
<script>
function myHider(e){
document.getElementById("blackOut").style.display="none";
}
</script>
</html>
the code below demonstrates what i am trying to do. why is my "blackOut" div appearing in front of my "theGoods" div? shouldn't the z-index properly handle this?
<html>
<head>
<style>
table.theGoods{
display:block;
z-index:20;
background-color:yellow;
font-family:arial;
font-size:18px;
width:300px;
height:300px;
margin-right:auto;
margin-left:auto;
margin-top:180px;
text-align:center;
}
div.blackOut{
position:absolute;
background-color:red;
width:100%;
height:100%;
padding:0px;
top:0px;
left:0px;
z-index:2;
}
div.behindIt{
z-index:1;
background-color:red;
}
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
</head>
<body>
<table class="theGoods" id="theGoods">
<tr>
<th>
la la
</th>
</tr>
</table>
<div class="blackOut" id="blackOut" onClick="myHider(event)"></div>
</body>
<script>
function myHider(e){
document.getElementById("blackOut").style.display="none";
}
</script>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
如果没有
position:absolute或position:relative，z-index:20;没有任何效果。 （你想要后者。）z-index:20;has no effect without eitherposition:absoluteorposition:relative. (You want the latter.)z-index 仅影响具有“static”以外的
position属性的元素。如果将position:relative;添加到 table.theGoods，应该没问题。一般来说，所有参与堆叠的元素都需要有position:relative或者position:absolute。z-index only affects elements with a
positionproperty other than 'static'. If you addposition:relative;to table.theGoods, you should be fine. In general, all elements involved in the stacking need to have position:relative or position:absolute.则无法使用 z-index
如果不使用:或:
table.theGoods 中缺少的内容，
You cant use z-index without using:
or:
which is lacking from table.theGoods
您需要添加“位置：绝对；”到 table.theGoods 的样式。
You need to add "position: absolute;" to the style for table.theGoods.