佈局大綱

CSS 2.1中，一個盒可能會根據三種定位方案來佈局：

1. 常規流 CSS 2.1中，常規流包括塊級盒的塊格式化（block formatting），行內級盒的行內格式化和塊級與行內級盒的相對定位
2. 浮動在浮動模型中，盒先根據常規流來放置，然後從常規流中取出來並儘可能遠地向左或向右移動。其它內容可能沿著浮動（盒）的一側排列（Content may flow along the side of a float）
3. 絕對定位 在絕對定位模型中，一個盒會從常規流中全部移除（它不會影響後面的兄弟元素）並根據包含塊確定位置

如果一個元素是浮動的，絕對定位的或者是根元素，它就叫流外（out of flow）（元素）。如果一個元素不是流外的，就叫流內（in-flow）（元素）。在常規流佈局中有清楚的解釋。

選擇定位方案： position屬性

position屬性決定了用哪種CSS 2.1定位演算法來計算盒的位置

• position
  • Value: static | relative | absolute | fixed | inherit
  • Initial: static
  • Applies to: 所有元素
  • Inherited: no
  • Percentages: N/A
  • Media: visual
  • Computed value: 與指定值相同

屬性值的含義如下：

• static（常規流）

  盒是個常規盒，根據常規流佈局。top、left、right、bottom屬性失效

• relative（相對定位）

  盒的位置是根據常規流計算的（被稱為常規流中的位置），然後盒相對於其常規位置偏移。當盒B為相對定位時，後面的盒的位置仍按照B沒有偏移量來計算。table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell和table-caption元素上`position:relative`的效果是未定義的

• absolute（絕對定位）

  盒的位置（及可能的大小）由top、left、right、bottom屬性指定，這些屬性指定了相對於盒的包含塊的偏移量。絕對定位的盒脫離了常規流，意味著它們不會影響後面兄弟元素的佈局，而且，雖然絕對定位盒有外邊距，但它們不會與任何其它外邊距合併。

• fixed（絕對定位）

  除了盒相對於某些參照（reference）是fixed之外，盒的位置根據absolute模型來計算。如同absolute模型一樣，盒的外邊距不會與任何其它外邊距合併。媒體型別為handheld，projection，screen，tty和tv的情況下，該盒相對於**（視口viewport）固定，並且滾動時不會移動。媒體型別為print時，該盒在每一頁都會呈現，並且相對於頁盒（page box）固定，即使頁面是通過一個（視口viewport）**看到的（例如，列印預覽時）。

使用者代理可以把根元素的position視為static

9.3.2 盒偏移：top、left、right、bottom

如果元素的position屬性有一個除static外的值，就說它是定位元素（positioned）。定位的元素生成定位的盒（positioned boxes），根據以下4個屬性佈局：

• top

  • Value：<length> | <百分比> | auto | inherit

  • 初始值：auto

  • 適用元素：定位元素

  • 繼承性：無

  • 百分比：參照包含塊的高度

  • Media：visual

  • 計算值：如果指定了一個長度，就是對應的絕對長度；如果指定了一個百分比，就是指定的值；否則就是`auto`

    該屬性指定了一個絕對定位的盒的上外邊距邊界離盒的包含塊的上邊界有多遠。對於相對定位的盒，偏移量參照該盒自身的上邊界（例如，該盒在常規流中給定了一個位置，然後根據這些屬性從原位置偏移）

• right

  • Value：<length> | <百分比> | auto | inherit

  • 初始值：auto

  • 適用元素：定位元素

  • 繼承性：無

  • 百分比：參照包含塊的寬度

  • Media：visual

  • 計算值：如果指定了一個長度，就是對應的絕對長度；如果指定了一個百分比，就是指定的值；否則就是`auto`

    與top類似，只是指定了一個盒的右外邊距邊界離該盒包含塊的右邊界有多遠。對於相對定位的盒，偏移量參照該盒自身的右邊界

• bottom

  • Value：<length> | <百分比> | auto | inherit

  • 初始值：auto

  • 適用元素：定位元素

  • 繼承性：無

  • 百分比：參照包含塊的高度

  • Media：visual

  • 計算值：如果指定了一個長度，就是對應的絕對長度；如果指定了一個百分比，就是指定的值；否則就是`auto`

    與top類似，只是指定了一個盒的右外邊距邊界離該盒包含塊的下邊界有多遠。對於相對定位的盒，偏移量參照該盒自身的下邊界

• left

  • Value：<length> | <百分比> | auto | inherit
  • 初始值：auto
  • 適用元素：定位元素
  • 繼承性：無
  • 百分比：參照包含塊的高度
  • Media：visual
  • 計算值：如果指定了一個長度，就是對應的絕對長度；如果指定了一個百分比，就是指定的值；否則就是`auto`

  與top類似，只是指定了一個盒的左外邊距邊界離該盒包含塊的左邊界有多遠。對於相對定位的盒，偏移量參照該盒自身的左邊界

這4個屬性的值含義如下：

• <length> 偏移量是到參照邊的固定距離。允許負值

• <percentage> 偏移量是包含塊寬度（對於left 或者 right）或高度（對於top 或者 bottom）的百分比。允許負值

• auto 對於非替換元素，該值的效果取決於那些相關的值也是`auto`的屬性。非替換元素的詳細情況，見絕對定位的width和height章節。對於替換元素，該值的影響只取決於替換內容的固有尺寸。替換元素的詳細情況，見絕對定位的width和height章節。

`display`，`position`與`float`之間的關係

這3個屬性影響盒的生成及佈局—`display`，`position`和`float` —間的相互影響如下：

1. 如果`display`值為`none`，那麼`position`和`float`不會生效。此時，元素不生成盒
2. 否則，如果`position`值為`absolute`或者`fixed`，盒就是絕對定位的。`float`的計算值置為`none`。並且display根據下表來設定。盒的位置將由`top`，`right`，`bottom`和`left`屬性以及盒的包含塊決定
3. 否則，如果`float`值不為`none`，那麼盒是浮動的，`display`根據下表來設定
4. 否則，如果該元素是根元素，`display`根據下表來設定，但指定值`list-item`應該變成計算值`block`還是`list-item`，在CSS 2.1中是未定義的
5. 否則，其它`display`屬性值（計算值）就用指定值

Specified value	Computed value
inline-table	table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
其它	與指定值相同

下一章：Css盒模型

原文釋出時間為：2018年02月10日
原文作者：雕刻零碎 

本文來源：開源中國 如需轉載請聯絡原作者