Почему zIndex не работает из IE / Javascript? - PullRequest
Новая
       12

Почему zIndex не работает из IE / Javascript?

0 голосов
/ 01 июня 2010 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=7" />
        <title>Problem demo</title>
    </head>
    <body>
        <div style="background:red; position:relative;" id='div1'>1.
            <div style="background:lime; position: absolute; width: 300px;height: 300px; top: 3px; left: 30px" id="div3">3.</div>
        </div>
        <div style="background:blue;position:relative;color: white" id="div2">2.</div>
        <script type="text/javascript">/*<![CDATA[*/
            window.onload= function()
            {
                // The container of the absolute DIV
                document.getElementById('div1').style.zIndex = 800;

                // The lowest DIV of all which obscures the absolute DIV
                document.getElementById('div2').style.zIndex = 1;

                // The absolute DIV
                document.getElementById('div3').style.zIndex = 1000;
            }
        /*]]>*/</script>
    </body>
</html>

В двух словах, этот скрипт содержит два элемента DIV с position:relative, а первый из них содержит третий DIV с position:absolute. Все готово для работы в режиме стандартов IE-7 (я нацеливаюсь на IE7 и выше).

Я знаю об отдельных z-стеках IE, поэтому по умолчанию третий DIV должен быть ниже второго DIV. Для решения этой проблемы есть некоторый Javascript, который устанавливает z-порядки первого и третьего DIV на 1000, а z-порядки второго DIV на 999.

К сожалению, это не помогает. Если бы z-индексы были установлены в разметке, это работало бы, но почему бы не из JS?

Примечание: Эта проблема не существует в режиме стандартов IE8, но я нацеливаюсь на IE7, поэтому не могу на это полагаться. Кроме того, если вы сохраните это на свой жесткий диск, а затем откроете его, сначала IE жалуется на что-то об ActiveX и прочем. После того, как вы отмахиваетесь, все работает как положено. Но если вы обновите страницу, проблема снова возникнет.

Добавлено: На самом деле, вы можете уменьшить его еще больше до 

window.onload= function()
{
    document.getElementById('div1').style.zIndex = 800;
}

И проблема все еще там.

Ответы [ 2 ]

0 голосов
/ 01 июня 2010

Не уверен из того, что вы заявили, что вы уже знаете это, но IE7 создает новый контекст стека для позиционированных элементов, поэтому z-index не работает так, как должно быть в IE <8 Я не помню исправление, и я не уверен, что оно применимо здесь, но Google для этого. </p>

Это полезная статья.

0 голосов
/ 01 июня 2010

div2 равно absolute в элементе relative, этот относительный элемент div1 имеет тот же индекс zIndex, что и относительный элемент div3 . Я думаю, что IE может выбрать относительный zIndex div1 (и тот факт, что он предшествует div3 ), чтобы помочь поместить элемент absolute поверх div3 , просто потому, что div1"выше", чем div3 ..

У меня нет IE7 для проверки вашего кода прямо сейчас, но, может быть, если вы попытаетесь использовать более простые значения zIndex, и все по-другому? Как и «100, 200, 300» для div1 и т. Д. (Соответственно), div3 должно быть выше div1 , то есть div2 .

Бог, который звучит как бред, когда я читаю его обратно, но, надеюсь, это поможет

(добавлено, из моего комментария ниже) измените значение overflow этих 3 элементов div на visible, и это работает. Звучит странно, но это IE; странно.

...