gpt4 book ai didi

css:如何确保一个 html 元素始终位于页面底部?

转载 作者:行者123 更新时间:2023-11-28 19:09:23 25 4
gpt4 key购买 nike

假设我有这个 html 代码:

<html>  
<body>
<div id="Div1" style="position:relative">
<span style="position:absolute;top:100px">My text</span>
</div>
<div id="Div2">
Test
</div>
</body>
</html>

无论 Div1 的内容如何,​​如何使 Div2 始终低于 Div1?因为span在div1中使用了position:absolute,所以div2的内容出现在了div1的内容之上。

最佳答案

div2之所以显示在div1之上,是因为div2是绝对定位的。这意味着 div1 不参与正常的文档流,就好像它被拉出文档一样。因此,div2 出现在顶部,然后您的绝对定位将 div1 向下推到 100px。

从 div1 中取出绝对定位,然后使用边距或填充将其向下移动到所需位置。这样,正常的 html 渲染会将 div2 放在 div1 的下方。

如果您被迫对 div1 进行绝对定位,那么您也需要对 div2 进行绝对定位。您可能需要使用 javascript 计算出 div1 的高度并适本地设置 div2 的顶部。

<html>  
<body>
<div id="Div1" style="position:absolute; top: 100px;">
<span>My text</span>
</div>
<div id="Div2" style="position:absolute; top: 130px;">
Test
</div>
</body>
</html>

关于css:如何确保一个 html 元素始终位于页面底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1411919/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com