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>

CSS定位

1 个答案: