All geek questions in one place

Problem with an absolutely positioned div nested in another absolutely positioned div

I am not a CSS expert, especially when this is positioning, and I hope it 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>

"Controls" do not display correctly. In fact, it does not appear at all. If I pull out "top: 10px;" style and replace it with "bottom: 400px;", it displays correctly. However, this is not what I want, since the height of the "map" div is adjusted if the user resizes the browser window. I also do not want to use JavaScript to place the div.

The separators "legend" and "logos" are both displayed correctly.

I am doing my testing in Firefox.

+3
2

. , Sarfraz sholsinger, , :

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

, div "map" div "position; relative;".

:

  • sholsinger, "map" div ​​ 100%, div 100% . "Bottom: 250px;" div . . "controls" ( "margin-top: 260px;" ), , .
  • , "" div ": "; , .

.

+2

parent div , relative children absolute. CSS :

+6

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

More articles:


All Articles