Question

<html>
<head>
    <title>Sample</title>

    <script>
        window.onload = function()
        {
            alert(document.getElementById('div1').style.zIndex);
            alert(document.getElementById('div2').style.zIndex);
        }
    </script>

    <style type="text/css" media="screen">
        #div2
        {
            z-index: 1;
        }
    </style>
</head>
<body>
    <div id="div1" style="z-index:1"></div>
    <div id="div2"></div>
</body>

上述代码的结果是第一个警报的“1”，第二个警告没有任何内容。

为什么我不能通过CSS设置“div2”的z-index？

感谢。

Answer 1

1：它已设置，但JS无法确定它是否未设置为内联
2：如果对象未定位（如gulbrandr发布的那样），它将不会产生任何影响

关于1。如果它没有设置为内联（或通过javascript），您可以使用currentStyle或getComputedStyle检索它，它会为您提供当前应用的样式。

Answer 2

来自W3Schools.com：

z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）

Answer 3

.style.*个属性集直接映射到通过style 属性设置的属性，而不是从适当的样式表级联的属性。

要查找计算的z-index，您需要使用getComputedStyle

无法通过CSS设置z-index

3 个答案: