Относительно позиционированные предметы внутри абсолюта. Проблемы в IE - PullRequest
Новая
       11

Относительно позиционированные предметы внутри абсолюта. Проблемы в IE

3 голосов
/ 15 мая 2009

Это вызывает у меня такую ​​головную боль. У меня проблемы в IE (6/7) с кодом ниже.

У меня есть несколько элементов контейнера на странице, которые относительно позиционированы. Внутри одного из них находится абсолютно позиционированный предмет. Этот внутренний элемент должен появиться НАД любым из элементов контейнера. Это правильно отображается в Safari и Firefox, но не в IE.

Я привел очень урезанный пример этого, чтобы вы могли его увидеть. Я не могу удалить позицию: относительная; на контейнере или позиции: абсолютная; на внутреннем элементе, потому что это в конечном итоге будет HTML-элемент раскрывающегося списка.

Большое спасибо за вашу помощь.

Предварительный просмотр здесь. 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <link href="http://www.louiswalch.com/common/css/reset.css" type="text/css" rel="stylesheet">
    <style type="text/css">     

        BODY { padding: 20px; }

        .item {
            margin-bottom: 5px;
            padding: 5px;
            background-color: orange;       
            position: relative;
            float: left;
            width: 300px;
            }

            .item .display {
                background-color: red;
                }

            .item .inside {
                padding: 5px;
                background-color: yellow;
                position: absolute;
                top: 23px;
                left: 10px;
                width: 100%;
                z-index: 5000;
                }           

        .clear { clear: both; }

    </style>
</head>
<body>
    <div class="item">
        <div class="display">Item</div>
    </div>
    <div class="clear"></div>

    <div class="item">
        <div class="display">Item (Open)</div>
        <div class="inside">This is inside<br/>more<br/>more</div>
    </div>
    <div class="clear"></div>

    <div class="item">
        <div class="display">Item</div>
    </div>

</body>
</html>

Ответы [ 3 ]

4 голосов
/ 15 мая 2009

В IE вы не можете иметь элемент div с более высоким z-индексом, чем его контейнер, поэтому, если вы хотите, чтобы элемент "inside" появлялся над другими элементами div, тогда его контейнер также должен быть над этими элементами конечно, что это за стандарт, но путь IE, кажется, имеет больше смысла, логически говоря).

В вашем примере, сделайте это ... 

<div class="item" style="z-index:5000">
            <div class="display">Item (Open)</div>
            <div class="inside">This is inside<br/>more<br/>more</div>
    </div>

.... и ваше меню теперь будет над нижним элементом, как в FF.

В идеале, вам нужно просто создать стиль под названием itemOpen или что-то, для которого настроено свойство z-index, как это, но даже атрибут style сделает свое дело.

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

Очевидно, что в IE позиционированные элементы генерируют порядок размещения независимо от любых определенных значений z-index. текст ссылки

В этой статье говорится, что предоставление родительскому элементу более высокого z-индекса исправит ошибку. Дайте этому шанс.

0 голосов
/ 15 мая 2009

IE не поддерживает z-index. Я боюсь.

IE дает каждому элементу zindex сверху вниз. Поэтому все, что находится внизу, имеет большую аорту.

Например, когда я создаю выпадающие меню, я проверяю, что они появляются в коде под основным содержанием.

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

Нет похожих вопросов

...