CSS定位

Question

我有一些 HTML 代码，例如

<div id="top" style="height: 50px"></div>
<div id="bottom" style="height: 50px"></div>
<div id="content">Here goes some text</div>

我希望中间的 div (#bottom) 位于 div (#top) 的顶部，同时，#content div 应该自动向上移动 50px。

如果我这样编码

<div id="bottom" style="height: 50px; position: relative; top: -50px;"></div>

#bottom div 向上移动但#content div 留在后面.. 在两者之间留有 50px 的间隙。

那么应该怎么定位呢？？

Answer 1

如果我没理解错的话，你想把 #bottom 从常规页面流中删除，放在 #top 之上。

从常规页面流中取出元素的两种方法是 position:float; 和 position:absolute;

不知道您页面的其余部分是什么样的，我建议如下:

<div id='container' style='position:relative'>
  <div id="top" style="height: 50px"></div>
  <div id="bottom" style="height: 50px; position:absolute; top:0em; left:0em;"></div>
  <div id="content">Here goes some text</div>
</div>

这会将 #bottom 放在 #container 的左上角，这也是 #top 所在的位置。 #container 作为常规页面流的一部分将位于 #top 的正下方。

要使绝对定位的元素居中，您可以这样做:

<div style="display:table; margin: 0 auto;">  <!-- display:table; to 'shrink-wrap' the div - margin: 0 auto; to center it->
    <div style="position: relative; float:left;"> <!-- float also shrink-wraps -->
        <div id='top'>top div content</div>
        <div id='bottom' style="position:absolute; top:0em; width:100%; text-align:center;"> content of bottom div </div>
        <div id='content'></div>
    </div>
</div>