css屬性position: static|relative|absolute|fixed|sticky簡單解析

目錄

• static 靜態定位（默認）
• relative 相對定位
  • 正常文檔流
  • 加了relative以後的佈局
  • 加上margin/padding/border以後的佈局
• absolute 絕對定位
  • 正常文檔流
  • 加了absolute以後的佈局
  • 加上margin/padding/border以後的佈局
• fixed 固定定位
• sticky 粘性定位
• 注意的點
• 此文檔對應的例子
• 參考資料

CSS position屬性規定一個元素在文檔中的定位類型。top,right,bottom和left屬性則決定了該元素的最終位置。

Object.style.position = static | relative | absolute | fixed | sticky

先解釋下什麼是文檔流：
將窗體自上而下分紅一行行, 並在每行中按從左至右的順序排放元素,即爲文檔流

static 靜態定位（默認）

默認值，元素出如今正常的流中。位置設置爲static的元素，它始終處於正常文檔流給予的位置，不影響其餘元素的偏移。（static 元素會忽略任何 top、bottom、left 、 right 或者 z-index 聲明）。

relative 相對定位

位置設置爲 relative 的元素，相對於其正常位置進行定位，該元素會在正常文檔流中會佔據位置，從而不影響其餘元素的偏移。此元素的位置可經過 "left"、"top"、"right" 以及 "bottom" 屬性來規定。所以 "left:20px" 會將元素移至元素正常位置左邊 20 個像素的位置。

咱們用個簡單例子分析

正常文檔流

<div style="width: 200px; height:200px; background-color:green;">
  <div style="width: 100px; height:100px;background-color: #cff;">
    1
  </div>
  <div style="width: 100px; height:100px; background-color: #ccf;">
    2
  </div>
</div>

加了relative以後的佈局

<div style="width: 200px; height:200px; background-color:green;">
  <div style="width: 100px; height:100px;background-color: #cff; position: relative;top: 10px;left:10px;">
    1
  </div>
  <div style="width: 100px; height:100px; background-color: #ccf;">
    2
  </div>
</div>

加上margin/padding/border以後的佈局

記住一點，relative是相對自身定位。加上margin/padding/border以後，是在這些屬性起做用以後，再來計算relative。

<div style="width: 200px; height:200px; background-color:green;">
  <div style="width: 100px; height:100px;background-color: #cff; margin: 10px; padding: 10px; border: 10px solid red;  position: relative;top: 10px;left:10px;">
    1
  </div>
  <div style="width: 100px; height:100px; background-color: #ccf;">
    2
  </div>
</div>

加上margin/padding/border以後圖對比：

absolute 絕對定位

位置設置爲 absolute 的元素，相對於非`static`定位之外的第一個父元素進行絕對定位，脫離了正常文檔流，該元素不佔據正常文檔流空間，所以會影響其餘元素的偏移。此元素的位置可經過 "left"、"top"、"right" 以及 "bottom" 屬性來規定。

咱們用個簡單例子分析

正常文檔流

<div style="width: 200px; height:200px; background-color:green; position: relative;">
  <div style="width: 100px; height:100px;background-color: #cff;">
    1111111111
  </div>
  <div style="width: 100px; height:100px; background-color: #ccf;">
    我是2,我在下面 .....我是2,。我在下面,會被覆蓋？
  </div>
</div>

加了absolute以後的佈局

設置爲絕對定位以後，被定位的元素會以 「第一個設置了定位的祖先元素」 定位，這裏就是第一個div元素。

<div style="width: 200px; height:200px; background-color:green; position: relative;">
  <div style="width: 100px; height:100px;background-color: #cff; position: absolute;top: 10px; left: 10px;">
    1111111111
  </div>
  <div style="width: 100px; height:100px; background-color: #ccf;">
    我是2,我在下面 .....我是2,。我在下面,會被覆蓋？
  </div>
</div>

加上margin/padding/border以後的佈局

記住一點，absolute是相對第一個被定位的祖先元素。加上margin/padding/border以後，也是在這些屬性起做用以後，再來計算absolute。

<div style="width: 200px; height:200px; background-color:green; position: relative;">
  <div style="width: 100px; height:100px;background-color: #cff;
  position: absolute;top: 10px; left: 10px;margin: 10px; padding: 10px;border: 10px solid red;">
    1111111111
  </div>
  <div style="width: 100px; height:100px; background-color: #ccf;">
    我是2,我在下面 .....我是2,。我在下面,會被覆蓋？
  </div>
</div>

加上margin/padding/border以後，absolute定位的對比圖：

fixed 固定定位

位置被設置爲 fixed 的元素，可相對於瀏覽器視口(viewport)進行定位。不論窗口滾動與否，元素都會留在那個位置。工做於 IE7（strict 模式），低版本的IE不支持。此元素的位置可經過 "left"、"top"、"right" 以及"bottom" 屬性來規定。`fixed`屬性會建立新的層疊上下文。當元素祖先的`transform`屬性非`none`時，容器由視口改成該祖先。

正常狀況的定位，請看最後的例子。這裏着重說下transform屬性非none值時候，fixed的表現。transform屬性向元素應用2D 或 3D 轉換。該屬性容許咱們對元素進行旋轉，縮放，移動或傾斜。

<div style="transform: rotate(10deg); width: 200px; height: 200px; border: 1px dotted red;">我定義transform屬性
    <div style="position: fixed; left: 50px; bottom: 100px; border: 1px solid red; background-color: #ffc;">
      我是第二個fixed,我在哪裏？我使用fixed定位
    </div>
  </div>

體現的佈局:

今後圖中，能夠看出。fixed定位是相對於父元素有transform屬性非none值來決定的。

sticky 粘性定位

盒位置根據正常流計算(這稱爲正常流動中的位置)，而後相對於該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在全部狀況下（即使被定位元素爲 table 時），該元素定位均不對後續元素形成影響。當元素 B 被粘性定位時，後續元素的位置仍按照 B 未定位時的位置來肯定。position: sticky 對 table 元素的效果與 position: relative 相同。

注意的點

1. 這裏的幾個屬性，均可以理解爲相對定位，只是參照物不同。
   relative，參照物爲本身。
   absolute，參照物爲有定位(非static定位)的父元素。
   fixed, 參照物爲瀏覽器的視口。
   sticky，參照物爲瀏覽器視口。設置不一樣方向的值，會粘住於不一樣方向。
2. 咱們知道html和body元素相差有8px。relative和static方式在最外層時是以body標籤爲定位原點的，而absolute方式在無父級是position非static定位時是以html做爲原點定位。
3. sticky 粘性定位，須指定 top,right,bottom和left四個閾值其中之一，纔可以使粘性定位生效。不然其行爲與相對定位相同。
4. 若是隻設置position屬性，覆蓋程度：relative > fixed > absolute > sticky > static，relative會在最上面。(關於這一點，仍是有點點疑惑的，爲何會這樣，或者爲何不是這樣）

此文檔對應的例子

https://codepen.io/weiqinl/pen/BqeQoQ
裏面有position各類屬性的狀況。

參考資料

1. https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
2. http://www.w3school.com.cn/cssref/pr_class_position.asp