Question

#content div包含大部分网络内容。如下所示，有一个280px的上边距，因为这是网站标题图像的高度，它作为背景放在“body”中（image / sky1.jpg）。

如何将div作为持有者定位在#content div的“边距”上方，以便我可以将#navigation，#Title div放在标题图像上方？

#content div上方的#top-float div是它的开头，但每次我向高度添加更多 “保证金”受到影响，将其推向下方。

我尝试将<div id="top-float></div>放在html的<div id="content"></div>之上。这是我应该如何定位的？

html {
    background: #73ADD7 url(images/gradient.gif) repeat-x;
}
body {
    padding: 0;
    margin: 0;
    background:url(images/sky1.jpg) no-repeat center top;
    color: #666;
    width: 100%;
    display: table; 
}
#top-float{
    padding-left:2.3em;
    padding-right:2.3em;
    height:10em;
}
#content {
    width: 890px;
    margin: 280px auto 0;
    background: #fff;
    border: solid 0px #ccc;
    padding: 0px;
}
#footer {
    width: 890px;
    margin: px auto 0;
    background:url(images/footer-bg.jpg)
    no-repeat center bottom #fff;
    border: solid 0px #ccc;
    height:250px;
}

Answer 1

最简单的方法是让#top-float高度为280px，然后将top-margin放在#content上：

<html>
  <head>
    <style type="text/css">
      html {
        background: #73ADD7 url(images/gradient.gif) repeat-x;
      }
      body {
        padding: 0;
        margin: 0;
        background:url(images/sky1.jpg) no-repeat center top;
        color: #666;
        width: 100%;
        display: table;     
      }
      #top-float{
        margin: 0;
        padding: 0 2.3em;
        height:280px;
      }
      #content {
        width: 890px;
        margin: 0 auto;
        background: #fff;
        border: solid 0px #ccc;
        padding: 0px;
      }
      #footer {
        width: 890px;
        margin: 0 auto;
        background:url(images/footer-bg.jpg)
        no-repeat center bottom #fff;
        border: solid 0px #ccc;
        height:250px;
      }
    </style>
  </head>
  <body>
    <div id="#top-float">
    </div>
    <div id="#content">
    </div>
    <div id="#footer">
    </div>
  </body>
</html>

如果您需要em尺寸调整，请给予#top-float尺寸调整的孩子，并确保提供#top-float overflow: hidden;

如果您希望将内容显示在标记中的标题上方以用于搜索引擎优化，则可以执行以下操作：

<html>
  <head>
    <style type="text/css">
      html {
        background: #73ADD7 url(images/gradient.gif) repeat-x;
      }
      body {
        padding: 0;
        margin: 0;
        background:url(images/sky1.jpg) no-repeat center top;
        color: #666;
        width: 100%;
        display: table;     
      }
      #top-float{
        position: absolute;
        top: 0;
        left: 0;
        padding: 0 2.3em;
        height:280px;
      }
      #content {
        width: 890px;
        margin: 280px auto 0;
        background: #fff;
        border: solid 0px #ccc;
        padding: 0px;
      }
      #footer {
        width: 890px;
        margin: 0 auto;
        background:url(images/footer-bg.jpg)
        no-repeat center bottom #fff;
        border: solid 0px #ccc;
        height:250px;
      }
    </style>
  </head>
  <body>
    <div id="#content">
    </div>
    <div id="#footer">
    </div>
    <div id="#top-float">
    </div>
  </body>
</html>

Answer 2

只需从内容div中删除上边距，然后使用指定的高度添加其上方的占位符。

HTML剪辑：

<body>
  <div id="header">Stuff</div>
  <div id="content">Body stuff.../div>
</body>

和CSS：

#content {
  margin-top:0;
}

#header {
  height:280px;
}

如果额外的标题信息在内容div中（语义上）更有意义，则可以使用负边距。

HTML剪辑：

<body>
  <div id="content">
    <div id="header">Stuff</div>
    Body stuff...
  </div>
</body>

和CSS：

#content {
  margin-top:280px;
}

#header {
  margin-top:-280px;
}

Answer 3

在没有看到HTML的情况下回答这个问题有点棘手，但有一些建议：

将＃top-float div放在内容div之外
使用负边距
将内容div与浏览器顶部齐平，并在内部添加标题div。然后将标题图像放在标题div中作为背景图像
看起来你不是居中的任何东西所以你也可以使用头部div的绝对定位

与往常一样，没有一种方法可以实现这一目标。

Answer 4

您可能希望对＃top-float div使用绝对定位或固定定位。

为什么要将标题图像作为背景图像？我想你会发现，如果你不把网站的标题图片作为背景，这一切都会变得更容易。通常的做法是点击网站的徽标（我假设在您的标题图片中）将用户带回主页。使网站的徽标成为背景图像会有效禁用此功能。

边距如何与div定位一起使用？

4 个答案: