css - 绝对定位的 div 嵌套在另一个绝对定位的 div 中的问题

我不是 CSS 专家，尤其是在定位方面，我希望这个问题很容易解决。

这是我简化的 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>

“控件”div 未正确呈现。事实上，它根本不显示。如果我去掉“top:10px;”样式，并将其替换为“bottom:400px;”，它确实正确呈现。不过，这不是我想要的，因为如果用户调整浏览器窗口的大小，“ map ”div 的高度会得到调整。我也不想使用 JavaScript 来定位 div。

“图例”和“ Logo ”div 都正确呈现。

我正在 Firefox 中进行测试。

最佳答案

您只需将 parent div 的位置设置为 relative 和 children absolute。此处解释了此 CSS 技巧: