相對和絕對定位混淆

我是新來的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

相對和絕對定位混淆

回答

相關問題