html - IE10 : border ignores element's z-index

Question

所以有一个问题:元素的边框有最高的z-order

<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 低，因此它不应在悬停时使用react。但是，如果我将鼠标移过 .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;
}