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

我已经设置了一个div命名为Absolute的标头，以便它与窗口齐平。如何处理绝对位置的div标签后的DIV标签？

我然后有一个不带位置设置两者都包含在一个包装div标签

我已经设置的内容div标签以具有100像素从顶部填充，使得内容不会被报头冲掉内容div标签。

是否有任何其他方式在绝对定位的标题下移动内容而不需要使用填充或边距？

<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;}

来源

2013-11-14 Eamonn

是否有一个特定的原因，你需要摆放一切？如果您取消定位，流量将保持不变。 – SW4

调查z-index属性 – DarkBee

感谢您的回复。描述我尝试做什么的最佳方式是使用此页面，顶部堆栈交换和搜索工具跨越窗口的总宽度，并与窗口顶部齐平。之后，页面内容。 – Eamonn

您可以使用 “顶级” 属性：

例如

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

见this fiddle

来源

2013-11-14 11:42:01 sHentschel

你将不得不设置一个最高保证金为内容的div，因为当你设置页眉div的位置绝对以下div的会忽略标题div的高度。所以标题div高度属性也必须是静态的。

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

来源

2013-11-14 11:42:26 J2D8T

查看过你的代码后，下面的代码会达到同样的效果，除非你还没有提到额外的内容。我看到你的使用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-14 11:43:12 SW4

从我能理解，你将要使用relative定位，没有定位absolute。如果你能让问题更容易理解，我可能会有更好的答案。

来源

2013-11-14 11:46:52 Doge

作为一般规则，当你在容器内部浮动内容时，容器会折叠为容器的最小高度和宽度，具体取决于CSS主规则以及容器，块，内联块的类型。

在这种情况下，总是在浮动内容之后向一个容器添加一个清除属性，以便它不会破坏其他内容。

<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-14 13:37:38

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

回答

相关问题