html - IE10:边框会忽略元素的z-index

因此存在一个问题：元素的边框具有最高的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的z-index值，因此它不会在悬停时反应。
但是，如果我将鼠标移过.el的边界，它将变为红色。
有人知道这仅适用于IE10吗？
是否有任何变通办法强制.el完全低于.overlay？

最佳答案

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;
}

关于html - IE10:边框会忽略元素的z-index，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21118597/