Можно ли z-индексировать вложенный DIV выше (отображать «выше»), чем корневой DIV в IE7? - PullRequest
Новая
       10

Можно ли z-индексировать вложенный DIV выше (отображать «выше»), чем корневой DIV в IE7?

2 голосов
/ 26 мая 2009

ОБНОВЛЕНИЕ !!!

Предлагаемый ответ НЕ верен, моя ошибка. #Container DIV должен был иметь «float: left;». Пожалуйста, проверьте HTML в Firefox и IE7. Вы видите разницу!

Я не могу заставить вложенный DIV отображаться над иерархически более высоким вложенным DIV с помощью z-index ... Наложение продолжает накладываться на нижний вложенный DIV, даже если нижний вложенный DIV имеет более высокий z-индекс .. Это возможно даже в IE7?

Следующее показывает синий #details над зеленым # overlay в Firefox, однако в IE7 синий #details находится ниже зеленого # overlay

UPDATE2: Дорогой: добавление "z-index: 99;" к стилю #container заставляет появляться div .item класса (в Firefox IE запутался: в любом случае оба не отображаются правильно), в то время как они должны быть под оверлеем! Без z-index #container он корректно отображается в Firefox, но не в IE .... 

<html>
    <body>
        <style type="text/css">
            .item {
                float:left;width:75px;height:75px;background-color:red;
            }
        </style>
        <div id="main" style="position:relative;">
            <!-- this one should overlay everything, except #details -->
            <div id="overlay" style="position:absolute;
                                     top:0px;
                                     left:0px;
                                     width:500px;
                                     height:500px;
                                     z-index:1;
                                     background-color:green;"></div>
            <div id="container" style="position:relative;float:left;">
                <!-- these ones should display UNDER the overlay: so NOT visible -->
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <!-- this one should display above the overlay -->
                <div id="details" style="position:absolute;
                                         width:200px;
                                         height:200px;
                                         background-color:blue;
                                         left:400px;
                                         z-index:99;"></div>
            </div>
        </div>
    </body>
</html>

Ответы [ 2 ]

6 голосов
/ 26 мая 2009

Полагаю, вам нужно увеличить z-индекс #container, чтобы эта работа работала в IE7.

альтернативный текст http://img529.imageshack.us/img529/6416/24042958.jpg

1 голос
/ 27 мая 2009

Я не думаю, что IE7 позволит вам сделать это, если вы не можете изменить свою разметку.

# контейнер не будет находиться за #overlay, пока ему не будет дана абсолютная позиция, и если вы измените z-индекс #container на -1, тогда его дочерний #details будет отставать от него.

Изменение z-индекса .items на -1 также не будет работать.

Если невозможно переместить #details за пределы #container ?? Я не могу предложить альтернативу, не видя точно, что вы пытаетесь достичь в качестве конечного результата и какой у вас контроль, если таковой имеется?

например. какой смысл в оверлее? это будет слегка прозрачный div или solid? Вы не хотите скрывать элементы, если пользователь не сможет увидеть их за оверлеем?

У вас есть доступ к библиотекам javascript, таким как Jquery ..., чтобы можно было перемещать #details в другое место в DOM?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...