Question

我已经将一个名为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;}

Answer 1

您可以使用“top”属性：

e.g。

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

请参阅this fiddle

Answer 2

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

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

Answer 3

看了你的代码后，下面会达到同样的效果，除非你没有提到其他内容。我看到你使用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;
}

Answer 4

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

Answer 5

作为一般规则，当您在容器中放置内容时，包含容器会折叠到它; s最小高度和宽度，具体取决于您的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。

让我知道是否适合您：）

如何在位置绝对的div标签之后处理DIV标签？

5 个答案: