無法通過CSS設置z-index

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 個解決方案

解決方案1
3 已采納 2010-11-19 12:47:09

解決方案2
2 2010-11-19 12:46:20

解決方案3
1 2010-11-19 13:03:07

無法通過CSS設置z-index

問題描述

3 個解決方案

解決方案1 3 已采納 2010-11-19 12:47:09

解決方案2 2 2010-11-19 12:46:20

解決方案3 1 2010-11-19 13:03:07

解決方案1
3 已采納 2010-11-19 12:47:09

解決方案2
2 2010-11-19 12:46:20

解決方案3
1 2010-11-19 13:03:07