爲什麼設置位置：相對位置不變？

我在學習css，我很想知道爲什麼我們設置的位置：相對我們甚至沒有設置具體的位置，比如left: 20px,top: 10px。下面是一個CSS代碼的例子。爲什麼設置位置：相對位置不變？

#home #header { 
    position: relative; 
    width: 822px; 
    height: 152px; 
    margin: 0 19px; 
    padding: 0; 
    overflow: hidden; 
} 

#header { 
    position: relative; 
    width: 822px; 
    height: 152px; 
    margin: 0 19px; 
    padding: 0; 
    overflow: hidden; 
    background: url(img/bg-content-wrap-top-int.png) no-repeat center bottom; 
}

來源

2011-05-04 Rui Xia

通常這3個原因之一：

爲了影響元素的堆疊方式（在元素的位置發生變化時（具有或不具有特定的z-index）。見https://developer.mozilla.org/en/understanding_css_z-index
正如Niklas Ringdahl所提到的，如果父母是position:relative，position:absolute裏面的元素將相對於父母。請參見http://css-tricks.com/absolute-positioning-inside-relative-positioning/
確保按需要應用其他某個屬性或修復故障（如「黑客」）。這是由於與IE相關的幾個原因而完成的。

來源

2011-05-04 16:26:06 morewry

+1好收集:)。 – kapa 2011-05-05 06:36:09

這不是強制性的，但它是很好做的，如果子元素應該是使用position:absolute，因爲它們的相對位置將針對最近的父元素與position:relative

來源

2011-05-04 16:16:46

實際上，它將相對於最接近的父母進行計算，其中除靜態以外的任何其他位置。只是碰巧其他'位置'值從根本上影響元素的位置，而'相對'則更加溫和。 – cHao 2011-05-04 19:53:55

謝謝，我不知道！ :-) – 2011-05-05 07:51:53

在大多數情況下，它被用來設置計算0,0位置位於#header之內的任何子元素的位置。

通常情況下，如果你這樣做：

<div id="header"> 
    <div id="fos">hehe</div> 
</div>

，你使用這個CSS：

#fos { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
}

您#fos元素將定位從頁面左上角10,10。但是，如果你把position: relative;上#header，#fos將從的#header左上角定位10,10。

這也將發生，如果#header有什麼比position: static別人（這是position默認值），但通常relative被使用，因爲它保持在文檔流的元素。所以，當你設置它，並沒有設置任何特定的位置，它將保持原樣，但0,0位置將被改變。

我爲你創建了一個簡單的jsFiddle Demo。

（它也是在其他一些情況下用作@rhyaniwyn descibed相當不錯，我只是想說明這一個多一點的時間，這是一個非常強大的技術）

來源

2011-05-04 16:25:14 kapa

非常值得關注;沒有它我就無法運作！ – morewry 2011-05-04 16:34:50

非常感謝。解釋非常清楚。 – 2011-05-04 17:14:54

爲什麼設置位置：相對位置不變？

回答

相關問題