相对和绝对定位混淆

我是新来的HTML/CSS，我刚开始围绕定位打包，但我似乎有一个误解。现在我试图在它下面创建一个水平分隔符的页眉。我的标题绝对定位，顶部和左侧值为0，高度为88.我认为如果我给出了水平分隔符的位置：relative，高度为5，那么它会直接位于标题的下方。相反，它会在页面的最顶部结束，我为什么会感到困惑。相对和绝对定位混淆

我想再次在我的页面上使用这个水平分隔符，在我的页脚上方，所以我不想给这个水平分隔符position: absolute和top: 88px。任何帮助表示赞赏，非常感谢！

我的（非常简单的）码到目前为止：

<div id="header"></div> 
    <div class="horizontal-divider"></div> 

#header { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 88px; 
    width: 100%; 
} 

.horizontal-divider { 
    position: relative; 
    height: 5px; 
    width: 100%; 
    top: 0px; 
    background-color: white; 
    border: 1px solid black; 
}

来源

2013-07-28 Cody Ma

绝对定位位置相对于它的包含块边缘的元件。它的包含块是其最接近的祖先，它具有设置为非静态的任何东西。它也使得元素脱离正常流动，所以它不影响跟随它的任何东西的位置。

相对定位相对于定位元件以在那里它会如果它是position: static被定位（未相对于任何其他元素）。

由于的#header绝对定位，.horizontal-divider之后没有定位。

如果你想要一个元素被绝对定位的元素后，立即呈现，则：

不要绝对定位的第一要素

放在其他（容器）元素两种元素（所以他们在正常流动的除外）后制定了一个

绝对定位的容器元素

这就是说，你应该能够得到你后的效果呃在标题上设置border-bottom并完全删除分隔符。

来源

2013-07-28 15:00:01 Quentin

当任何格中给出绝对定位，它是从HTML页面的正常流动去除。所以，横向规则和其后的其他div就像存在标题一样。因为标题具有相对定位，所以它处于正常流程中，并且它相对于正常流程中的第一个div（在这种情况下不是这样），所以它的右侧位于顶部。希望这有助于。

来源

2013-07-28 15:01:51

W3Schools的[有很多问题]（http://www.w3fools.com/），最好避免。 – Quentin

如果你要使用position:absolute与position:relative那么你position:absolute包装应该是position:relative内则仅存在使用position:absolute

喜欢这里的好处是为你工作Fiddle或者你可以按照下面的代码示例中：

<!-- The CSS --> 
<style type="text/css"> 
#header { 
position: relative; 
top: 0px; 
left: 0px; 
height: 88px; 
width: 100%; 
background-color: #f00; 
} 
.horizontal-divider { 
background-color: #999; 
border: 1px solid #000; 
bottom: 0; 
height: 5px; 
position: absolute; 
width: 100%; 
} 
</style> 

<!-- The HTML --> 
<div id="header"> 
    <div class="horizontal-divider"></div> 
</div>

一个很好的教程定位元素是在这里CSS-Tricks

来源

2013-07-28 15:09:08

相对和绝对定位混淆

回答

相关问题