為什么將元素的zindex設置回0不會將其移到IE9中的其他對象之后？

Question

在IE 6、7、8，FF 3.5以上版本，Chrome，Safari中可以使用，但在IE 9中則不能使用！ 我要做的就是將一個對象移到前面，然后再將其移回到另一個對象后面。 它會移動到前面，但不會返回（盡管正確設置了zIndex）。

所有對象都絕對放置。

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

Answer 1

我不確定為什么在IE9中會發生這種情況，但是您是否嘗試過將每個起始z-index增加1，所以與其將其更改為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>

Answer 2

樣式屬性應設置為字符串，而不是數字。 IE確實存在z索引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;
        }
    }

為什么將元素的zindex設置回0不會將其移到IE9中的其他對象之后？

問題描述

2 個解決方案

解決方案1
1 已采納 2012-03-13 01:20:39

解決方案2
0 2012-03-13 01:46:59

為什么將元素的zindex設置回0不會將其移到IE9中的其他對象之后？

問題描述

2 個解決方案

解決方案1 1 已采納 2012-03-13 01:20:39

解決方案2 0 2012-03-13 01:46:59

解決方案1
1 已采納 2012-03-13 01:20:39

解決方案2
0 2012-03-13 01:46:59