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

发布于 2024-10-07 05:07:39 字数 1114 浏览 0 评论 0原文

我不是 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 未正确呈现。事实上，它根本不显示。如果我取出“top：10px;”样式，并将其替换为“bottom:400px;”，它确实渲染正确。但这不是我想要的，因为如果用户调整浏览器窗口的大小，“地图”div 的高度就会调整。我也不想使用 JavaScript 来定位 div。

“legend”和“logos”div 都正确渲染。

我正在 Firefox 中进行测试。

原文

I'm no CSS expert, especially when it comes positioning, and I'm hopeful that this one 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>

The "controls" div is not rendering correctly. In fact, it doesn't display at all. If I take out the "top:10px;" style, and replace it with "bottom:400px;", it does render correctly. This is not what I want, though, as the "map" div's height gets adjusted if the user resizes the browser window. I also do not want to use JavaScript to position the div.

The "legend" and "logos" divs are both rendering correctly.

I'm doing my testing in Firefox.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

转身泪倾城 2024-10-14 05:07:39

您只需将parent div 的位置设置为relative 和children absolute。这个 CSS 技巧的解释如下：

相对定位内的绝对定位

回复收藏 0 原文

只有一腔孤勇 2024-10-14 05:07:39

这就是我最终得到的结果。谢谢 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;”。

我第一次发布的示例中有两个问题：

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

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

Here's what I ended up with. Thanks, Sarfraz and sholsinger, for leading me in the right direction:

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

So I basically just nested the "map" div in an absolutely positioned div and set it to "position;relative;".

There were two problems in the example I first posted:

As pointed out by sholsinger, the height of my "map" div was set to 100%, and this was sizing the div to 100% of the browser window. The "bottom:250px;" was simply pushing that div up and off the page. This was causing the controls to render off screen. I could have simply setup a new style on "controls" ("margin-top:260px;") to get the display working correctly, but this would not have solved the underlying problem correctly.
As pointed out by Sarfraz, the "map" div needed to have "position:relative;" defined on it so the absolutely positioned controls would display correctly.

The fixes above solve both of these problems.

回复收藏 0 原文

~没有更多了~