HTML + CSS z 索引不起作用
我有一个非常烦人的问题，即我的 z 索引不起作用，并且 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>
I have a very annoying problem which is my z-index is not working and the div is sitting above (on the y-axis) and not on top of (on the z-axis) the other div.
This will probably be completely obvious but I cannot see a problem with my code. Can anyone spot where I am going wrong? It should be so easy but I am getting so frustrated because I cannot find a solution.
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尝试将箭头位置更改为绝对位置。
Try to change the position of the arrow to absolute.
如果我理解正确，您可以使用负上边距将第二个 div 向上移动到 greenleftarrow：
http://jsfiddle.net /XSH2Y/
If I understand correctly, you can use a negative top margin to move the second div upwards onto greenleftarrow:
http://jsfiddle.net/XSH2Y/