Javascript getComputedStyle返回意外的z索引

当尝试获取未定义位置的元素的计算样式时，我会自动获取

我在这里没有想到的是父元素的z-index:100

getComputedStyle是否应该为A1返回100，或者是否自动为正确的值，尽管A1父级的z索引为>B

CSS

HTML

您需要设置位置：相对；对于A1，以获得适当的z索引值

如果只有一个元素有z索引，那么A1也应该有z索引：inherit

我更新了你的小提琴，现在它可以工作了：

请参阅详细信息：

您需要设置位置：相对；对于A1，以获得适当的z索引值

如果只有一个元素有z索引，那么A1也应该有z索引：inherit

我更新了你的小提琴，现在它可以工作了：

请参阅详细信息：

自动是正确的，因为元素本身不建立新的堆叠上下文，并且在当前堆叠上下文中处于级别0，请参阅：

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

这意味着相对于A，A1为同一标高，而相对于容器的A1为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)

“自动”是正确的，因为元素本身不建立新的堆叠上下文，并且在当前堆叠上下文中处于级别0，请参见：

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

这意味着相对于A，A1为同一标高，而相对于容器的A1为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)

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

auto

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