position
移動元素 Box 的位置,以特定元素的 Box 的四邊 (以下稱容納區 containing block) 作為移位的起始 (零點) 。
分為幾種處理模式,並定義不同的容納區:
除了 position:static;
初值 (未指定時,就是 Normal Flow) 以外,元素就是 positioned 元素,配上 top
, right
, bottom
, left
四個方向移位 (offset) 屬性的距離值就可以移動位置,朝容納區中心移動為正值,反過來的方向為負值,如 left:100px;
, Box 會離開容納區左邊緣 100 像素,朝中心方向 (右) 移動。
positioned 元素會朝使用者方向,往前堆疊,仿如單獨在另一層平面上,而且一個 positioned 元素一層平面,不會有二個元素在同一平面;因此, positioned 元素不會有相互推擠的問題,而是會出現重疊的現象,沒有 positioned 的元素自然就在後面了。 positioned 元素可以指定 z-index
改變前後堆疊順序,但是非 positioned 元素不行。
position
原則上不適合用在具有 table
結構 (列、格、欄…等) 的元素,這很容易被理解, table
結構如果被破壞,那就會亂了,也就全部需要重新指定,這樣似乎是多此一舉。
float
元素 Box 脫離原有位置,左邊緣緊靠到容納區的左邊 (float:left
) ,或右邊緣緊靠到容納區的右邊 (float:right
) ,並獨立成一塊區域。
在 block-level box 元素上指定 clear
,可以解除沿 floated box 周邊流排的模式。
display
指定元素在樹狀結構文件中產生的 Box 的模式,也是所謂的 Layouts 。