0

我已将一个名为 header 的 div 设置为 Absolute，以便它与窗口齐平。

然后我有一个没有设置位置的内容 div 标签两者都包含在包装 div 标签中

我已将内容 div 标签设置为距顶部 100px 的填充，这样内容就不会被标题抹掉。

有没有其他方法可以在绝对定位的标题下移动内容而无需使用填充或边距？

<div id="wrapper">
    <div id="header">
      <div id="indent">content of header</div>
    </div>

<div id="content">content of page</div>  

</div>

CSS

#wrapper {
background-color: #FFF;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 100px;
padding-left: 5px;
clear: both;}

#header {
position: absolute;
width: 100%;
left: 0px;
top: 0px;
right: 0px;
background-color: #FFF;}

#indent {
width: 960px;
margin-right: auto;
margin-left: auto;
position: relative;}
#content {
clear: both;
padding-top: 100px;}
4

5 回答 5

1

You could use the "top" attribute:

e.g.

.absolute {
    position: absolute;
    height:20px;
    width: 20px;
    background-color: #FF00FF;
}
.relative {
    position: relative;
    top:20px;
    height:20px;
    width: 20px;
    background-color: green;
}

See this fiddle

于 2013-11-14T11:42:01.230 回答
0

您必须为内容 div 设置上边距，因为当您将标题 div 的位置设置为绝对位置时，以下 div 将忽略标题 div 的高度。所以标题 div 高度属性也必须是静态的。

您也可以将 html 正文元素的边距和填充设置为 0px 并从标题标签中删除绝对定位，这也将使标题 div 与窗口齐平。

于 2013-11-14T11:42:26.980 回答
0

查看您的代码后，以下将达到相同的效果，除非您没有提及其他内容。我看到您使用clear它也有助于让我们知道是否存在其他可能与您发布的代码交互的元素。

#wrapper {
    background-color: #FFF;
    padding: 0px 5px 100px 5px;
}

#header {
    background-color: red;
    text-align:center;
}

#indent {
    display:inline-block;
    text-align:left;
    /* width : xx */
    margin 0 auto;
}
于 2013-11-14T11:43:12.660 回答
0

据我了解，您将要使用relative定位，而不是absolute定位。如果你能让问题更容易理解，我可能会有更好的答案。

于 2013-11-14T11:46:52.323 回答
0

作为一般规则，当您在容器内浮动内容时，包含的容器会折叠到它；最小高度和宽度取决于您的 CSS 主规则和容器的类型、块、内联块。

在这种情况下，请始终在浮动内容之后立即向一个容器添加一个 clear 属性，这样它就不会破坏您的其他内容。

<div id="wrapper">
    <div id="header">
      <div id="indent">content of header</div>
    </div>

    <div class="clear=box"></div>

    <div id="content">content of page</div>  
</div>

#wrapper { position:relative; }
#header {
  position:absolute;
  clear:both; /* add this to clear your content */
}
#content { clear:both; /* in case clear:both from above not working */ }
#clear-box { clear:both; /* a container dedicated to clear contentfloat */ }

有时您可以添加一个专用 div 以清除先前内容的浮动。绝对保留定位。使用默认元素行为，除非没有其他方法并且您被迫使用 position:absolute。

让我知道是否适合你:)

于 2013-11-14T13:37:38.513 回答