绝对定位的 div 嵌套在另一个绝对定位的 div 中的问题答案

【问题标题】：Issue with absolutely positioned div nested within another absolutely positioned div绝对定位的 div 嵌套在另一个绝对定位的 div 中的问题
【发布时间】：2010-12-11 03:24:58
【问题描述】：

我不是 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;”，它确实呈现正确。不过，这不是我想要的，因为如果用户调整浏览器窗口的大小，“地图”div 的高度就会得到调整。我也不想使用 JavaScript 来定位 div。

“legend”和“logos” div 均正确呈现。

我正在 Firefox 中进行测试。

【问题讨论】：

标签： css css-position

【解决方案1】：

您应该简单地将 parent div 的位置设置为 relative 和 children absolute。这里解释了这个 CSS 技巧：

Absolute Positioning Inside Relative Positioning

【讨论】：

对，但如果我将“地图”设置为“位置：相对；”它无法正确渲染。
同意。 #controls div 可能正在渲染，但您在父级上有overflow:hidden，因此它被绘制在父级之外，因此不显示。此外，如果父 div #map 将 250px 扩展到页面顶部之外（如果您的 CSS 正确呈现，则应该是这样），那么控件无论如何都会在屏幕外。
@sholsinger：我尝试了更改（在 div#map 上设置“position:relative;”并删除“bottom:250px;”），但这会导致地图填满整个窗口。 “height:100%”表示它正在获取其父级的完整高度，即浏览器窗口的完整高度。也就是说，控件现在正在渲染到我想要的位置。
@sholsinger：不过，你说的很有道理；我确实认为控件渲染正确。它们只是在浏览器视口上显示 250 像素。

【解决方案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 嵌套在绝对定位的 div 中，并将其设置为“位置；相对；”。

我第一次贴的例子有两个问题：

正如 sholsinger 所指出的，我的“地图”div 的高度设置为 100%，这将 div 的大小设置为浏览器窗口的 100%。 “底部：250px;”只是将那个 div 向上推离页面。这导致控件在屏幕外渲染。我可以简单地在“控件”（“margin-top:260px;”）上设置一个新样式来让显示正常工作，但这并不能正确解决根本问题。
正如 Sarfraz 所指出的，“地图”div 需要具有“位置：相对；”在其上定义，以便绝对定位的控件正确显示。

上述修复解决了这两个问题。

【讨论】：