Question

我不是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>

“controls”div无法正确呈现。事实上，它根本不显示。如果我拿出“顶部：10px;”样式，并将其替换为“bottom：400px;”，它确实正确呈现。但这不是我想要的，因为如果用户调整浏览器窗口大小，“map”div的高度会被调整。我也不想使用JavaScript来定位div。

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

我在Firefox中进行测试。

Answer 1

您只需将父 div设置为relative和儿童 absolute。这个CSS技巧在这里解释：

Absolute Positioning Inside Relative Positioning

Answer 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％。 “底部：250px;”只是把这个div推到了页面上。这导致控件渲染屏幕。我可以简单地在“控件”（“margin-top：260px;”）上设置一个新样式，以使显示正常工作，但这不能正确解决底层问题。
正如Sarfraz所指出的，“地图”div需要具有“位置：相对”;在其上定义，以便绝对定位的控件可以正确显示。

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

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

2 个答案: