推 forkome:說的很詳細，謝謝 03/05 11:54
推 howardwang:水哦! 03/05 15:42
※ 引述《forkome (烏龜)》之銘言：
: 在教學當中提到absolute原點為父元件左上角、relative原點為應有之自然位置
: 我還是搞不懂兩者有什麼分別，或是在什麼樣的情況下，兩者才不一樣呢？
假設4個box
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
■a
■b
c
■d
這是一般的排版(Normal flow), 就是在應有之自然位置
下一個box會接在上一個後面, float則會接在旁邊
前面box的大小會影響後面的位置
relative以這個位置作為原點
而設為absolute, box就會脫離normal flow
像是獨立在上面的圖層, 不會影響到其他box的位置
位置原點為該box的containing block
(containing block的定義解釋在這裡
http://www.w3.org/TR/2004/CR-CSS21-20040225/visudet.html
懶的看這些鬼東西了 請自己研究)
可能會是設為relative, absolute或fixed 的父標籤
現在把c設為position: absolute; top:0
會變成:
c
■d
(a和b被蓋在底下)
。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 218.162.235.15
※ 編輯: xiphoid 來自: 218.162.235.15 (03/05 02:03)