Question

所以有一个问题：元素的边界具有最高的z顺序

<div class="container">
    <div class="el"></div>
    <div class="overlay"></div>
</div>
<style type="text/css">
.container {
    width: 300px;
    height: 300px;
    border: 1px solid #999;
    position: absolute;
}
.el {
    position: absolute;
    z-index: 8;
    left: 50%;
    top: 50%;
    border: #000 5px solid;
    height: 30px;
    width: 30px;
    margin-left: -20px;
    margin-top: -20px;
}
.el:hover {
    background-color: #F00;
}
.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}
</style>

.el的z-index低于.overlay所以它不应该在悬停时做出反应。但是，如果我将鼠标移过.el的边框，它就会变红。有人知道这只针对IE10吗？是否有任何变通办法迫使.el完全低于.overlay？

Answer 1

z-index应该更高而不是更低，尝试更改值：

http://jsfiddle.net/jJ7M7/

.container {
    width: 300px;
    height: 300px;
    border: 1px solid #999;
    position: absolute;
}
.el {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 50%;
    border: #000 5px solid;
    height: 30px;
    width: 30px;
    margin-left: -20px;
    margin-top: -20px;
}
.el:hover {
    background-color: #F00;
}
.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
}

Answer 2

OMG。我意外地找到了解决方法。如果我们在.overlay中使用任何背景颜色并设置非常小的不透明度而不是.el的边框停止以对鼠标做出反应。

.container {
    width: 300px;
    height: 300px;
    border: 1px solid #999;
    position: absolute;
}
.el {
    position: absolute;
    z-index: 8;
    left: 50%;
    top: 50%;
    border: #000 5px solid;
    height: 30px;
    width: 30px;
    margin-left: -20px;
    margin-top: -20px;
}
.el:hover {
    background-color: #F00;
}
.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    background-color: #fff;
    opacity: 0.01;
}

实际上它甚至可以用不透明度：0;在我的IE10中

IE10：border忽略元素的z-index

2 个答案: