css：如何确保一个html元素始终位于页面底部？_Css

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

css

css：如何确保一个html元素始终位于页面底部？,css,Css,假设我有以下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> 我

假设我有以下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>


我的文字
试验

我应该怎么做才能使Div2始终低于Div1，而不管Div1的内容是什么？因为跨度在Div1中使用position:absolute，所以Div2的内容显示在Div1的内容之上

使用显示：块；在这些div上使用display:block；在那些div上

杰夫：div作为标准块元素，所以不会有任何区别

你可以试试：

<div id="Div1" style="position:relative; display:inline-block">
  <span style="position:absolute;top:100px">My text</span>
</div> 
<div id="Div2">
  Test
</div>


我的文字
试验

杰夫：div是标准的块元素，所以不会有任何区别

你可以试试：

<div id="Div1" style="position:relative; display:inline-block">
  <span style="position:absolute;top:100px">My text</span>
</div> 
<div id="Div2">
  Test
</div>


我的文字
试验

为什么不这样做

<div id="Div1" style="margin-top:100px">
   <span>My text</span>
</div> 
<div id="Div2">
Test
</div>


我的文字
试验

我不太明白你为什么那样做。你能再解释一下你想做什么吗？我相信有更好的方法

为什么不这样做呢

<div id="Div1" style="margin-top:100px">
   <span>My text</span>
</div> 
<div id="Div2">
Test
</div>


我的文字
试验

我不太明白你为什么那样做。你能再解释一下你想做什么吗？我相信有更好的方法

您希望div2位于div1的下方还是页面的最底部？如果您希望它位于div1下面，请添加

clear:both;

第二节

如果要将其固定到页面底部，请在div2上使用fixed position属性。您希望div2位于div1下方还是页面底部？如果您希望它位于div1下面，请添加

clear:both;

第二节

如果要将其固定到页面底部，请在div2上使用fixed position属性。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>


我的文字
试验

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>


我的文字
试验

也许是这样的

<html>
<body>
    <div id="Div1" style="position:relative">
        <div style="position:absolute;top:0">just some text<br />very long text<br />very long text<br />very long text<div id="Div2" style="margin-top:30px">div thats always below(30px's below)</div></div>      
    </div>
</body>
</html>


只有一些文本
非常长的文本
非常长的文本
非常长的文本div，它总是在下面（30px在下面）

也许是这样的

<html>
<body>
    <div id="Div1" style="position:relative">
        <div style="position:absolute;top:0">just some text<br />very long text<br />very long text<br />very long text<div id="Div2" style="margin-top:30px">div thats always below(30px's below)</div></div>      
    </div>
</body>
</html>


只有一些文本
非常长的文本
非常长的文本
非常长的文本div，它总是在下面（30px在下面）

其他人正确回答了关于位置：相对与位置：容器分区中的绝对和页面流的问题

只是补充一下答案。当我学习CSS中的定位时，我发现下面的教程非常有用

其他人正确回答了关于位置：相对与位置：容器div中的绝对和页面流的问题

只是补充一下答案。当我学习CSS中的定位时，我发现下面的教程非常有用

请粘贴您使用的css。请粘贴您使用的css。确实如此。这没什么区别，真的。没什么区别。谢谢，但没什么区别。Div2仍然出现在Div1上方。谢谢，但这没有任何区别。Div2仍然出现在Div1上面。我已经编辑了我的答案，这应该可以工作了。。。除非你真的需要在所有地方都有绝对定位，基本上我有2个div，我希望Div2在Div1的任何内容之下。实际上，Div1包含一些图像，这些图像使用绝对定位位于Div1中。我希望Div2的内容在Div1中的图片下面。你做了什么工作，但你改变了问题。Div1的内容是使用绝对定位定位的。我已经编辑了我的答案，这应该有用。。。除非你真的需要在所有地方都有绝对定位，基本上我有2个div，我希望Div2在Div1的任何内容之下。实际上，Div1包含一些图像，这些图像使用绝对定位位于Div1中。我希望Div2的内容在Div1中的图片下面。你做了什么工作，但你改变了问题。Div1的内容是使用绝对定位来定位的。或者只需将Div2嵌套到该span/div中，并在其上放置边距，然后瞧……；）或者将Div2嵌套到span/div中，并在其上加上边距，瞧……）