爲什麼將元素的zindex設置回0不會將其移到IE9中的其他對象的後面？

這適用於IE 6,7,8，FF 3.5+，Chrome，Safari，但在IE 9中卻不行！我所做的只是將一個物體移動到前面，然後再將它移回另一個物體的後面。它移動到前面，但不返回（儘管zIndex被正確設置）。爲什麼將元素的zindex設置回0不會將其移到IE9中的其他對象的後面？

所有對象都被絕對定位。

<!doctype html> 
<html> 
<head> 
    <title>Test</title>  
</head> 
<style> 
body 
{ 
    background-color: #c6e2f1; 
} 

.moveable 
{ 
    position:absolute; 
    top: 300px; 
    left: 10px; 
    width: 200px; 
    height: 50px; 
    background-color: red; 
    z-index: 0; 
} 

.stationary 
{ 
    position:absolute; 
    top: 300px; 
    left: 0px; 
    width: 300px; 
    height: 100px; 
    background-color: yellow; 
    z-index: 1; 
} 
</style> 
<body> 
    <div id="moveable" class="moveable"></div> 
    <div id="stationary" class="stationary"></div> 
    <script> 
    var up = false; 
    document.getElementById("stationary").onclick = function() 
    { 
     if (!up) 
     { 
      up = true; 
      document.getElementById("moveable").style.zIndex = 2; 
     } 
     else 
     { 
      document.getElementById("moveable").style.zIndex = 0; 
      up = false; 
     } 
    } 
    </script> 
</body> 
</html>

來源

2012-03-13 Don Rhummy

我已經能夠得到它的唯一途徑是增加其他對象的zIndex的（黃色靜止的）每一次！如果我增加一次，那麼它只會工作兩次，然後停止工作！這裏發生了什麼？（換句話說，改變對象「固定」的zIndex爲1，然後2，3等，同時改變「可移動」回0） – 2012-03-13 01:15:19

您是否嘗試將其設置回'自動' – tkone 2012-03-13 01:22:52

我不知道這是爲什麼在IE9中發生的事情，但你嘗試過每增加1起z-index，使而是比更改爲2然後再回到0，將其更改爲3則返回1.

<!doctype html> 
<html> 
<head> 
    <title>Test</title> 
</head> 
<style> 
body 
{ 
    background-color: #c6e2f1; 
} 

.moveable 
{ 
    position:absolute; 
    top: 300px; 
    left: 10px; 
    width: 200px; 
    height: 50px; 
    background-color: red; 
    z-index: 1; 
} 

.stationary 
{ 
    position:absolute; 
    top: 300px; 
    left: 0px; 
    width: 300px; 
    height: 100px; 
    background-color: yellow; 
    z-index: 2; 
} 
</style> 
<body> 
    <div id="moveable" class="moveable"></div> 
    <div id="stationary" class="stationary"></div> 
    <script> 
    var up = false; 
    document.getElementById("stationary").onclick = function() 
    { 
     if (!up) 
     { 
      up = true; 
      document.getElementById("moveable").style.zIndex = 3; 
     } 
     else 
     { 
      document.getElementById("moveable").style.zIndex = 1; 
      up = false; 
     } 
    } 
    </script> 
</body> 
</html>

來源

2012-03-13 01:20:39

奇怪！所以問題是zindex 0處理？即使這不是一個真正的答案，但我是一個解決方法。（不是你的錯，這是微軟的錯）順便說一句，把它設置爲「-1」也起作用。 – 2012-03-13 01:33:24

我在quirksmode.org發現[此錯誤報告]（http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html）。顯然它只是在試圖在也有'position'的元素上使用'z-index：0'時。 – 2012-03-13 02:03:13

謝謝！只是我討厭IE的另一個原因。（不僅僅是因爲這個bug，而是因爲他們永遠不會修復這個bug，至少在任何版本中都沒有） – 2012-03-13 21:13:33

樣式屬性應該設置爲字符串，而不是數字。 IE的z-index 0有問題。請使用3和2，或2和-1。

var up = false; 
    document.getElementById("stationary").onclick = function() 
    { 
     if (!up) 
     { 
      up = true; 
      document.getElementById("moveable").style.zIndex = '2'; 
     } 
     else 
     { 
      document.getElementById("moveable").style.zIndex = '-1'; 
      up = false; 
     } 
    }

來源

2012-03-13 01:46:59 kennebec

爲什麼將元素的zindex設置回0不會將其移到IE9中的其他對象的後面？

回答

相關問題