为什么设置一个元素's zindex返回到0，不将其移动到IE9中的其他对象之后

Why does setting an element's zindex back to 0 not move it behind other objects in IE9?

本文关键字：移动 IE9 之后 对象 其他 返回 设置 一个 元素 zindex 为什么      更新时间：2023-09-26

这适用于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>

我不知道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>
样式属性应该设置为字符串，而不是数字。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;
        }
    }
相关文章：