CSS位置絕對尊重父元素作爲相對

在我的漫長旅程中，我已經轉換成已棄用的灰塵來更新CSS技能，我一直在玩某些CSS屬性 - 特別是z-index - 我注意到一些奇怪的東西，或者有一定的條件。CSS位置絕對尊重父元素作爲相對

元素DIV1的父是續，我已DIV1的位置屬性設置爲絕對的，然而，當我轉移它，它的移動相對於其父。我的印象是，設置爲絕對定位的項目是局外人常規流程，並且僅相對於瀏覽器端口作爲其父項移動。

我錯過了什麼？

如果撥弄鏈接不起作用，代碼：

CSS：

.cont { 
position:relative; 
height:200px; 
top:200px; 
left:100px; 
background: green; width: 200px; 
} 

.div1 { 
background:red; 
position:absolute; 
top:50px; 
}

HTML：

<div class="cont"> 
<div class="div1">DIV1</div> 
</div>

來源

2013-01-17 brooklynsweb

這是正確的行爲。 'position：absolute'將定位一個元素*相對於最接近的定位祖先*。要將其相對於文檔進行定位，請從父級移除'position：relative'，或將元素移出父級。 – Blazemonger

閱讀此https://developer.mozilla.org/en-US/docs/CSS/position – j08691

這是爲了快速響應; css的行爲指出。 – brooklynsweb

絕對定位的元素的位置相比具有第一父元素靜態以外的位置。由於你在relative的父母身上擁有它，因此它將相對於此父母完全定位。

您可能正在尋找fixed的位置，這是相對於瀏覽器窗口。

來源

2013-01-17 17:11:57

here：http://css-tricks.com/absolute-positioning-inside-relative-positioning/這裏有一個圖形解釋。 –

CSS位置絕對尊重父元素作爲相對

回答

相關問題