我有一个非常恼人的问题，即我的 z-index 不工作并且 div 位于另一个 div 的上方(在 y 轴上)而不是在(在 z 轴上)上方。
这可能是完全显而易见的，但我看不出我的代码有问题。谁能发现我哪里出错了？它应该很容易，但我很沮丧，因为我找不到解决方案。
<style>
.greenleftarrow{
position: relative;
z-index:10;
display:block;
background:#fff url(./images/greenleftarrow.jpg) no-repeat;
left:10px;
top: 0px;
height:140px;
opacity:0.5;
filter:alpha(opacity=50);
}
</style>
<body id="body1" style="position: relative; z-index:-1; height: 510px;" onload="javascript:showAndroidToast('1'); inspectLang(); getDocHeight()">
<div class="greenleftarrow" id="greenleftarrow" ></div>
<div style="position: relative; z-index:-1;">body body body body</div>
</body>
最佳答案
尝试将箭头的位置改为绝对位置。
.greenleftarrow{
position: absolute;
z-index:10;
display:block;
background:#fff url(./images/greenleftarrow.jpg) no-repeat;
left:10px;
top: 0px;
height:140px;
opacity:0.5;
filter:alpha(opacity=50);
}
关于HTML + CSS z-index 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8415092/