css Positioned Layout

第一式: position

移動元素 Box 的位置,以特定元素的 Box 的四邊 (以下稱容納區 containing block) 作為移位的起始 (零點) 。

分為幾種處理模式,並定義不同的容納區:

  1. position:relative;
  2. position:absolute;
  3. position:fixed;
  4. position: sticky; 【實驗】

除了 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

  1. display:inline;
  2. display:block;
  3. display:inline-block;
  4. display:list-item;
  5. display:inline-list-item;
  6. display:table;
  7. display:inline-table;
  8. display:table-caption;
  9. display:table-cell;
  10. display:flex;
  11. display:inline-flex;