All geek questions in one place

Relatively positioned objects within the absolute. Problems in IE

It gives me such a headache. I am having problems with IE (6/7) with the code below.

I have several container elements on the page that are located relatively. Inside one of them is an absolutely positioned element. This inner element should appear on top of any of the elements in the container. This displays correctly in Safari and Firefox, but not in IE.

I have included a very simple example of this for you. I can’t remove the position: relative; on container or position: absolute; on the inner element, because ultimately it will be an html dropdown element.

Thank you very much for your help.

Preview here.

<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
3

IE div z-, , , , "" 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 .

+4

-, IE z-.

, z- . .

+1

IE does not support z-index im fear.

IE places each element in zindex from top to bottom. Thus, everything that appears at the bottom has a higher priority.

For example, when I create drop-down menus, I am sure that they appear in the code below the main content.

0
source

Source: https://habr.com/ru/post/1708426/

More articles:


All Articles