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

Question

< Сильный > ОБНОВЛЕНИЕ !!!

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

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

Ниже показаны синие # детали над зеленым # наложением в Firefox, однако в IE7 синие # детали находятся под зеленым # наложением .

ОБНОВЛЕНИЕ 2: Дорогой: добавление «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>

html css z-index

2

Ropstah 26 Май 2009 в 16:02

Answer 1

Я считаю, что вам придется увеличить z-index #container, чтобы эта работа работала в IE7.

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

6

Pricey 26 Май 2009 в 17:36

Дорогой правильно. Просто подтвердил это, добавив z-index:98; к стилю #container, и он работает, как ожидалось

–

Jonathan Fingland

26 Май 2009 в 16:17

Мне жаль, что я допустил ошибку в своем примере: #container плавает (float: left;). Значит не работает ....... !!! Вы заслуживаете ответа, но у кого-нибудь есть ответ на настоящую проблему ??

–

Ropstah

26 Май 2009 в 16:27

Я только что попробовал это в IE7 с #container float: left; и он все еще работает? отсутствует ли вообще другое значение?

–

Pricey

26 Май 2009 в 16:36

Вы скопировали текст из поста? Я добавил изображение в вопрос ...

–

Ropstah

26 Май 2009 в 17:12

Я прикрепил изображение страницы в IE7 и HTML из вашего сообщения с добавленным z-индексом в #container. Это то, что вы хотели? На вашем скриншоте не было этого значения.

–

Pricey

26 Май 2009 в 17:38

Answer 2

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

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

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

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

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

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

1

Pricey 27 Май 2009 в 14:57

Я изменил положение немного по-другому. Я переместил оверлей ВНУТРИ контейнера и расположил его с отрицательным верхним / левым краем ... Теперь все работает нормально! Спасибо за вашу помощь

–

Ropstah

27 Май 2009 в 16:09

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

2 ответа

Похожие вопросы

Новые вопросы

html