css 定位

http://www.barelyfitz.com/screencast/html-training/css/positioning/

比較容易搞混的觀念釐清如下:

假設只有A和B兩個div, 如果只是一般的
<div id="A"></div>
<div id="B"></div>

那麼A 會在B 的下面
這是一般的定位模式, 也就是 position: static

如果B 是用相對定位
也就是position: relative, 且指定 top: 10px; left: 5px

那麼B 仍然在A之下, 但是相對於static 定位的位置, B 會再往下面10px, 再往右邊5px

不過要注意一點, B 雖然看起來移動了, 但它仍然占據了原本static 時相同的空間
這會影響到後續元素的位置

(注意上圖, C div 跟B 設定為static 定位時仍然沒有變化, 而不是我們直覺認為的, 會因為B 的偏移而偏移, 如果要達成類似的效果, 建議用margin-top, margin-left  來做, 而非relative)

注意: 對於Firefox 這個瀏覽器而言, 即便你已經設定了父元素的高度, 而子元素用的是relative, 父元素的隱藏高度仍然等於所有子元素的高度和, 即使用開發者工具看不出來, 但父元素後面的兄弟元素位置仍然會被影響到, 造成排版的困難

有一件事情很好玩, 如果父div 用relative, 那麼子元素用absolute 就會相對於父元素來定位, 而非上溯到使用absolute 的祖先元素

如果B 沒有指定relative

可以發現, B-1 定位的基準點變成整個body (因為往上追溯沒有元素是absolute 定位)


另一件事情也很好玩, 就是當A 元素使用float; 而B 元素正常時, A所佔據的體積會被B所無視(好像那邊沒有元素), 就以下圖來說, B 元素的左上角對齊的是其父元素(外圍白色的方形)的左上角, 並沒有被A 所擠開

但, B 裡面的內容卻不會占據 A的領域, 會繞著A的邊框避開

同時, z-index 對於處在 float 狀態下的元素是無效的

最後的最後, 或許不是新聞, 當A 和 B 都是float 時, 兩個元素會變成橫向並排