IE10：边框忽略元素的 z 索引

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 指数低于 .overlay 的 z指数，因此它不应该在悬停时做出反应。但是如果我将鼠标移过.el的边界，它就会变成红色。有谁知道这仅适用于IE10吗？是否有任何解决方法可以强制.el完全低于.overlay？

Answer 1

z 索引应该更高而不是更低，尝试更改值：

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

天哪。 意外地，我找到了解决方法。如果我们在.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中