2012-12-14 86 views
0

這是一個近似重複的this question,但沒有一個答案似乎真的解釋了這個的基本原理,這是我真正追求的。爲什麼絕對定位從相對祖先繼承?

我知道絕對定位的元素會檢查親子樹,直到他們用絕對,固定或相對定位碰到某個東西,然後將自己置於w/r/t中。

我在這裏的問題是:如何相對定位(而不是靜態,說)我錯過,會使這種直觀?作爲一個新手,從我的(完全無知的)觀點來看,這是非常隨意的,所以我很樂意讓專家來幫忙。是否聲明一些相對元素的行爲也使它成爲X,其中X對於兒童繼承他們的右上角是合乎邏輯的事情?在沒有頂部相對定位的元素,底部基本設置靜態元素,或者是更深層次的一些根本不同的動物是什麼?

+3

它是這樣工作的,因爲這就是規範所說的。規範說明了這一點,因爲有一個元素可以重置兒童可以用來定位自己的位置。那個元素碰巧被命名爲'relative'。 – deceze

回答

2

如果你讀了Specification很有道理:

框的位置(以及可能的大小)與「頂」,「右」,「底部」和「左」屬性指定。 這些屬性指定相對於框的包含塊的偏移量。絕對定位的盒子被取出正常流程。這意味着它們對後面的兄弟姐妹的佈局沒有影響。此外,雖然絕對定位的盒子有利潤率,但它們不會與其他利潤率摺疊。

我在相應的章節中增加了重點。絕對定位元件可以通過包含塊偏移

containing block規定了:

在CSS 2.1,許多框的位置和大小是相對於一個矩形框的邊緣來計算被稱爲包含塊。一般而言,生成的框充當後代框的包含塊;我們說一個盒子爲它的後代「建立」包含塊。短語「一個盒子的包含塊」是指「盒子所在的包含塊」,而不是它所生成的包含塊。

相對位置建立一個新的包含塊因此任何絕對定位的範圍內它是相對於它的包含塊的左上角。

不幸的是,這並不完全進入推理「爲什麼」......因爲你必須挖掘W3C的會議筆記來找出(也許)。所以我們可以給你的最好答案是「規格說明」。

+0

這正是我需要的,謝謝!對我來說,規範中幫助它有意義的關鍵在於「如果一個元素的」位置「屬性具有」靜態「以外的值,則該元素被定位。定位元素生成定位框」。因此,從某種意義上說,除「靜態」以外的所有內容都使用特殊的框邏輯,靜態(默認情況下不)。我覺得這很有幫助! –