无法通过 CSS 设置 z-index答案

【问题标题】：Can't set z-index via CSS无法通过 CSS 设置 z-index
【发布时间】：2010-11-19 21:03:07
【问题描述】：

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

谢谢。

【问题讨论】：

标签： javascript html css z-index

【解决方案1】：

1：已经设置了，但是如果不是内联设置，JS无法判断
2：它不会有任何影响，如果对象没有定位（如 gulbrandr 发布）

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

【讨论】：

所以你的意思是，如果我不使用 javascript 手动操作，例如：style.zIndex = 1;它永远不会工作？
不，如果您将其设置为内联 <div id="div1" style="z-index:1"></div> ，它也可以工作，这就是您在示例中为 #div1 获得正确值的原因。
感谢您的回答，这是最完整的。我还是不明白为什么 CSS & Javascript 的合作是这样的。我的意思是内联样式和 id 样式应该反映相同。
我试着解释一下：如果你通过“element.style.format”访问一个格式，你访问一个属性（样式）设置为元素，就像任何其他属性一样。全局样式表不设置/修改元素的属性，它们定义规则。通过这些规则中定义的格式无法从元素属性“样式”访问。

【解决方案2】：

来自W3Schools.com：

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

【讨论】：

好吧，即使我将 position: absolute 添加到 #div2 样式，我也会得到相同的结果。
这可以解释为什么它不适用，而不是为什么它不会被设置。

【解决方案3】：

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

要找到计算得到的 z-index，你需要使用getComputedStyle

【讨论】：