Question

说我有这个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？由于跨度在Div1中使用position：absolute，因此Div2的内容显示在Div1的内容之上。

Answer 1

为什么不这样做？

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

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

Answer 2

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>

Answer 3

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

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

Learn CSS Positioning in Ten Steps

Answer 4

杰夫：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>

Answer 5

你想div2下面的div2还是页面的最底部？如果你想在div1以下，那么添加

clear:both;

到div2。

如果你想将它固定在页面底部，那么在div2上使用固定位置属性

Answer 6

也许是这样的？

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

Answer 7

使用display：block;在那些div上

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

7 个答案: