getComputedStyle 返回意外的 z-index [英] getComputedStyle returns unexpected z-index

问题描述

当试图获取一个没有定义位置的元素的 computed style 时，我得到 auto.

对我来说意想不到的部分是父元素有 z-index: 100;

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

jsFiddle

CSS

html, body {边距:0；填充:0；边框:0；}#A, #B {位置:绝对；}#一种 {顶部:35px；宽度:200px；底部:35px；背景色:#999999；z-索引:100；}#A1 {高度:50px；宽度:200px；左边距:200px；背景颜色:#CC0066；}#B{顶部:35px；左:200px；右:0；底部:35px；背景色:#99CC00；}

HTML

<div id="A"><div id="A1">我是 A1，在 B 之上.<br/>我的父母有 z-index 100</div>
<div id="B"><br/><br/><br/>我是 B 并且没有 z-index.一世<br/>如果我有 `z-index:200;` A1 将不可见</div>

Javascript

var elementA1 = document.getElementById('A1');var a1 = window.getComputedStyle(elementA1).getPropertyValue("z-index");控制台日志(a1)；//记录自动"

解决方案

您需要为 #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

When trying to get computed style of a element without position defined I get auto.

The unexpected part for me here is that the parent element has z-index: 100;

Should getComputedStyle return 100 for A1 or is auto the correct value (although z-index for A1's parent is > 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'

解决方案

You need to set position: relative; for #A1 in order to get proper value for z-index.

And if only #A element has the z-index, then #A1 should have also z-index:inherit;

I updated your fiddle and it now it works: http://jsfiddle.net/6DJpY/1/

See details: https://bugs.webkit.org/show_bug.cgi?id=15562#c13

这篇关于getComputedStyle 返回意外的 z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！