1 前言

1.1 定位的背景

在CSS中，元素放置規則分為以下三種：

• 普通文檔流：元素按照從上至下，從左至右的順序排列，但元素又分行內元素和塊級元素，其排列方式有所不同：
  • 行內元素：水平排列，直到水平方向占滿一行后再另起一行排列。
  • 塊級元素：垂直排列，每一個塊級元素都會獨自占用一行。
• 浮動流：設置浮動的元素會向左或向右浮動，直到碰到父級元素或其他浮動的元素，需要注意的是，設置浮動的元素只是半脫離文檔流。
• 脫離文檔的定位流：當定位設置為absolute絕對定位或fixed固定定位時，元素會完全脫離文檔流，元素的位置就是定位時設置的位置，其布局不會受其他元素的影響，也不會影響到其他元素。

1.2 定位簡介

定位就是讓元素改變普通文檔流行為的一種方式，定位在CSS中的關鍵字為position，它共有五種取值：

• static（默認值）：靜態定位，可以理解為沒有定位；
• relative：相對定位；
• absolute：絕對定位；
• fixed：固定定位；
• sticky：粘性定位。

使用方法如下：

.box {position: static | relative | absolute | fixed | sticky; }

2 閱讀本文需要了解的內容

2.1 方位屬性

元素在設置定位后，需要給其設置方位屬性（top、bottom、left、right）用于指定元素定位位置：

由于top和bottom、left和right屬于相互矛盾的兩對屬性，所以在同時設置這類屬性后，top和left的優先級較高，正如上圖中top和left箭頭用實線表示，而right和bottom箭頭用虛線表示。

2.2 層疊順序

為什么給元素設置定位屬性后，元素會覆蓋到其他非定位元素的上方？這是因為當元素設置定位屬性后，其z-index屬性默認為auto，根據層疊順序，z-index: auto的元素的優先級高于block塊級元素，所以定位元素會覆蓋在其他非定位元素的上方。

拓展閱讀：CSS層疊上下文、層疊順序和層疊等級

2.3 文中的代碼示例

文中示例的公共代碼如下：

<div class="container"><div class="box red"></div><div class="box yellow"></div><div class="box green"></div> </div>

公共CSS樣式如下：

.container {width: 100%;height: 800px;background-color: skyblue;position: relative; }.box {height: 100px;display: inline-block; }.red {width: 100px;background-color: red; }.yellow {width: 200px;background-color: yellow; }.green {width: 150px;background-color: green; }

頁面效果如下：

文中的示例都是針對于yellow，所以例子中給出的主要代碼都是關于yellow的CSS代碼。

3 五種定位方式詳解

3.1 static靜態定位

若不給元素添加定位屬性，則靜態定位為元素的默認定位屬性，即元素遵循普通文檔流的規則排列，代碼如下：

position: static;

3.2 relative相對定位

相對定位有如下特點：

相對定位參照的對象是元素原來的位置；

相對定位元素不脫離普通文檔流，元素在普通文檔流中的原來位置依然保留，并且在其他普通文檔流中的元素看來，這個元素依然在原來的位置存在。

如下示例，給yellow添加相對定位并距離頂部100px后，yellow移動到了預期位置，并且其原來的位置依然在普通文檔流中保留，因為green并沒有因為yellow“離開”了原來的位置而補位上去：

這個例子的主要代碼如下：

.yellow {position: relative;top: 100px;width: 200px;background-color: yellow; }

3.3 absolute絕對定位

絕對定位有如下特點：

絕對定位參照的對象是最近已經定位的父元素，如果沒有已經定位的父元素，那么參照對象時根元素html；

絕對定位元素脫離普通文檔流，元素不再占有原來的位置，也不會對其他普通文檔流元素造成影響。

如下示例，在給yellow添加絕對定位并距離頂部50px、距離左側50px，yellow移動到了預期位置，可以發現其原來的位置沒有被保留，yellow“離開”后，原來的位置被green補位上去了。

這個例子的主要代碼如下：

.yellow {position: absolute;top: 50px;left: 50px;width: 200px;background-color: yellow; }

3.4 fixed固定定位

固定定位有如下特點：

固定定位元素參照的對象是瀏覽器窗口，若元素設置了固定定位，那么其位置即使窗口發生滾動，也不會變化，像釘在屏幕上一樣；

固定定位元素脫離普通文檔流。

如下示例，設置父元素高度為2000px，這樣頁面就出現了滾動條，將yellow設置為固定定位，并定位到屏幕正中間，當滾動條在最上方時，可以看到red和green，當滾動條到最底部時，red和green就看不到了，但是yellow依然還在頁面上，這就是固定定位：

.yellow {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 200px;background-color: yellow; }

3.5 sticky粘性定位

粘性定位有如下特點：

粘性定位參照的對象是瀏覽器窗口（固定定位的特點）；

粘性定位不脫離普通文檔流（相對定位的特點）。

粘性定位非常的特殊，區別與其它幾種定位，粘性定位的元素是依賴窗口的滾動的，隨之窗口的滾動，粘性定位元素會在relative相對定位與fixed固定定位之間轉換：

當粘性定位元素的原來位置全部在窗口內時，此時元素表現為relative相對定位；

當粘性定位元素的原來位置部分或全部在窗口外時，此時元素表現為fixed固定定位。

如下示例，設置父元素高度為2000px，這樣頁面就出現了滾動條，將yellow設置為粘性定位，當滾動條在最上方時，yellow的原位置全部在窗口內，此時元素表現為relative相對定位，并且此時也可以看到red和green，當滾動條到最底部時，這時yellow的原位置已經全部不在窗口內，此時元素表現為fixed固定定位，red和green就看不到了，但是yellow依然還在頁面上，這就是粘性定位：

注意：文字和圖片其實很難完全表達出粘性定位的特點，在頁面滾動時，元素原來的位置在窗口內的變化過程，最能反應粘性布局的特點，推薦讀者訪問頁面sticky demo在線體驗一下。

這個例子的主要代碼如下：

.yellow {position: sticky;top: 0;left: 0;width: 200px;background-color: yellow; }

4 總結

學習定位需要重點關注以下兩點：

每種定位參照的對象是什么？

定位是否脫離普通文檔流？

各個定位的特點如下表：

定位方式是否脫離普通文檔流參照對象

static靜態定位（默認）	否	-
relative相對定位	否	元素原來的位置
absolute絕對定位	是	已定位的父級元素
fixed固定定位	是	瀏覽器窗口
sticky粘性定位	否	瀏覽器窗口

總結

以上是生活随笔為你收集整理的图解CSS定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。