logo标签列表

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

csscss-position
3

我不是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。
“图例”和“标志”div都正确呈现。
我在Firefox中进行测试。
2个回答
7

您只需将 父级 div 设置为 relative，并将 子元素 设置为 absolute。这个 CSS 技巧在这里有详细的解释：

没错，但如果我将“map”设置为“position:relative;”，它就无法正确渲染。 - Nate Irwin
同意。#controls div 可能已经被渲染，但是您的父级元素上有 overflow:hidden，所以它被绘制在父级元素之外，因此不会显示。此外，如果父级 div #map 在页面顶部向上延伸了 250px（如果您的 CSS 被正确渲染），那么控件也将超出屏幕。 - sholsinger
@Nate：如果你移除 bottom:250px 并且将 div#map 上的 position:relative 改为相对定位，那么内部的 div 应该就会在你想要的位置了。 - sholsinger
@sholsinger：我尝试了更改（在div#map上设置“position:relative;”并删除“bottom:250px;”），但这会导致地图填满整个窗口。 "height:100%"意味着它获得其父元素的完整高度，即浏览器窗口的完整高度。 也就是说，控件现在正在以我想要的位置呈现。 - Nate Irwin
@sholsinger：你说的很有道理，我认为控件渲染是正确的，只是它们在浏览器视口上方显示了250像素。 - Nate Irwin
3

以下是我最终得出的结果。感谢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>

所以，我基本上只是将“map” div嵌套在绝对定位的div中，并将其设置为“position;relative;”。
在我最初发布的示例中存在两个问题：
1.正如sholsinger所指出的那样，我的“map” div的高度设置为100％，这将使div的大小调整为浏览器窗口的100％。 “bottom:250px;”只是将该div向上推并从页面上移除。这导致控件在屏幕外呈现。我本可以简单地在“controls”上设置新的样式（“margin-top:260px;”）以正确显示，但这不会正确解决根本问题。
2.正如Sarfraz所指出的那样，“map” div需要定义“position:relative;”，以便绝对定位的控件可以正确显示。
以上修复解决了这两个问题。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接