javascript - getComputedStyle 返回意外的 z-index

Question

当尝试获取未定义位置的元素的计算样式时，我得到auto。

这里让我意想不到的部分是父元素有 z-index: 100;

对于 A1，getComputedStyle 应该返回 100 还是 auto 是正确的值(尽管对于 A1 的 z-index parent 是 > B)

jsFiddle

CSS

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#A, #B {
    position: absolute;
}
#A {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#A1 {
    height: 50px;
    width: 200px;
    margin-left: 200px;
    background-color: #CC0066;
}
#B {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #99CC00;
}

HTML

<div id="container">
    <div id="A">
        <div id="A1">I am A1, on top of B.
            <br />My parent has z-index 100</div>
    </div>
    <div id="B">
        <br />
        <br />
        <br />I am B and have no z-index. I
        <br />f I had `z-index:200;` A1 would not be visible</div>
</div>

Javascript

var elementA1 =  document.getElementById('A1');
var a1 = window.getComputedStyle(elementA1).getPropertyValue("z-index");
console.log(a1); // logs 'auto'

Answer 1

您需要为 #A1 设置 position: relative; 以获得正确的 z-index 值。

如果只有#A 元素有 z-index，那么#A1 也应该有 z-index:inherit;

我更新了你的 fiddle ，现在它可以工作了:http://jsfiddle.net/6DJpY/1/

查看详情:https://bugs.webkit.org/show_bug.cgi?id=15562#c13