Question

当尝试获取未定位的元素的computed style时，我得到auto。

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

getComputedStyle为A1返回100或auto z-index是否为正确值（尽管A1的父级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; }为＆gt; B）

jsFiddle

CSS

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

HTML

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

的Javascript

{{1}}

Answer 1

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

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

我更新了你的小提琴，它现在起作用：http://jsfiddle.net/6DJpY/1/

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

Answer 2

auto是正确的，因为元素本身并未建立新堆叠上下文，并且在当前堆叠上下文中位于0级，请参阅z-index：

auto
当前堆叠上下文中生成的框的堆栈级别为0.除非它是根元素，否则该框不会建立新的堆叠上下文。

这意味着相对于A，A1是同一级别，而A1相对于container是100：

#container    (level   0 in context 0)
    #A        (level 100 in context 0; new context 1)
        #A1   (level   0 in context 1; relative to #container: 100 via context 1)
    #B        (level   0 in context 0)

getComputedStyle返回意外的z-index

jsFiddle

2 个答案: