Issue with absolutely positioned div nested within another absolutely positioned div_问答_开发者

Issue with absolutely positioned div nested within another absolutely positioned div

开发者 https://www.devze.com 2023-01-30 12:44 出处：网络

I\'m no CSS expert, especially when it comes positioning, and I\'m hopeful that this one will be easy to solve.

I'm no CSS expert, especially when it comes positioning, and I'm hopeful that this one will be easy to solve.

Here is my simplified HTML:

<body>
    <div style="height:100%;width:100%;">
        <div id="map" style="bottom:250px;height:100%;overflow:hidden;position:absolute;width:100%;">
            <!-- The controls div does not render correctly. -->
            <div id="controls" style="left:10px;position:absolute;top:10px;">
            </div>
            <!-- The legend and logos divs do render correctly. -->
            <div id="legend" style="bottom:45px;left:10px;position:absolute;">
            </div>
            <div id="logos" style="bottom:5px;left:10px;position:absolute;">
            </div>
        </div>
        <div id="search" style="bottom:0;height:250px;position:absolute;width:100%;">
        </div>
    </div>
</body>

The "controls" div is not rendering correctly. In fact, it doesn't display at all. If I take out the "top:10px;" style, and replace it with "bottom:400px;开发者_JAVA技巧", it does render correctly. This is not what I want, though, as the "map" div's height gets adjusted if the user resizes the browser window. I also do not want to use JavaScript to position the div.

The "legend" and "logos" divs are both rendering correctly.

I'm doing my testing in Firefox.

You should simply give the parent div a position set to relative and children absolute. This CSS trick is explained here:

Absolute Positioning Inside Relative Positioning

Here's what I ended up with. Thanks, Sarfraz and sholsinger, for leading me in the right direction:

<body>
    <div style="height:100%;width:100%;">
        <div style="bottom:250px;position:absolute;top:0;width:100%">            
            <div id="map" style="height:100%;overflow:hidden;position:relative;width:100%;">
                <div id="controls" style="left:10px;position:absolute;top:10px;">
                </div>
                <div id="legend" style="bottom:45px;left:10px;position:absolute;">
                </div>
                <div id="logos" style="bottom:5px;left:10px;position:absolute;">
                </div>
            </div>
        </div>
        <div id="search" style="bottom:0;height:250px;position:absolute;width:100%;">
        </div>
    </div>
</body>

So I basically just nested the "map" div in an absolutely positioned div and set it to "position;relative;".

There were two problems in the example I first posted:

As pointed out by sholsinger, the height of my "map" div was set to 100%, and this was sizing the div to 100% of the browser window. The "bottom:250px;" was simply pushing that div up and off the page. This was causing the controls to render off screen. I could have simply setup a new style on "controls" ("margin-top:260px;") to get the display working correctly, but this would not have solved the underlying problem correctly.
As pointed out by Sarfraz, the "map" div needed to have "position:relative;" defined on it so the absolutely positioned controls would display correctly.

The fixes above solve both of these problems.