2012-11-15 42 views
0

position:static等效於position: relative沒有指定頂部,底部,右側或左側屬性?位置:靜態與位置相同:相對,沒有指定其他屬性?

我雖然這樣做,因爲postion: absolute元素是相對於沒有postion: static的第一個元素。使用position: relative製作元素似乎是任意的,如果沒有使用其他屬性,則該元素的行爲將與position: static相同。圖我可能會錯過staticrelative

謝謝!

回答

3

答案是沒有,兩者是不同的

position: static;意味着什麼,但默認位置,除非和直到您使用position: relative, absolute or fixed,你需要使用的利潤率則不能使用top, right, bottom, left,而且,position: relative;進來實際行動的時候子元素定位absolute,讓所有元素可以浮動position: relative; DIV裏面,如果你只是保持靜態,他們將走出去的文件...

看看例子

Demo1(保持在div靜態和使用頂部,左側沒有任何效果)

Demo2(使它position: relative;不會影響頂部,左)

Demo3(保持父DIV靜態的,孩子就會流出來,如果它的定位absolute

Demo4(兒童DIV定位absolute將測量上,右,下,從它的父DIV左定位relative

這1短,很簡單但功能強大tutorial video清除出你的疑惑

而且在CSS positioning

+0

前兩個演示不適用,因爲您有頂部和左側屬性設置,這是超出問題的範圍。 – BoltClock

+0

@BoltClock只給了他一個完整的演示,不會對OP有幫助,但也會對其他人有所幫助:) –

+0

我同意@BoltClock,對於元素它自己{position:static;}和{position:relative;}與沒有其他條目看起來像這個[fork]中一樣(http://jsfiddle.net/1mmzbjfp/1/)。 (只需將div類從「relativeclass」切換到「staticclass」,並運行觀看不會改變的div渲染。 –

3

很短的文章使用position: relative沒有任何定位的工作方式相同position: static的元素本身,但它使差異對於有position: absolute的孩子。

一個絕對定位的元素相對於它的包含區塊被放置,並且包含區塊是最接近的父區,它的position設置不是static