Почему установка zindex элемента в 0 не перемещает его позади других объектов в IE9? - PullRequest
Новая
       9

Почему установка zindex элемента в 0 не перемещает его позади других объектов в IE9?

1 голос
/ 13 марта 2012

Это работает в 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>

Ответы [ 2 ]

1 голос
/ 13 марта 2012

Я не уверен, почему это происходит в 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>
0 голосов
/ 13 марта 2012

Свойства стиля должны быть заданы как строки, а не числа.И в 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;
        }
    }
...