目錄： 1.static 2.relative 3.absolute 4.fixed 5.實驗：static, relative, absolute中，父元素-子元素高度關系 6.z-index 7.參考資料 ?

---

? 1.static

• 默認的定位方式，不支持設置位移屬性
• 用來覆蓋之前創建的 absolute, relative, fixed?

---

? 2.relative “relative”可以給元素設置位移（offset）“top、right、bottom和left”屬性。通過這些位移屬性設置可以給元素進行精確的定位。

• relative + 位移屬性：

仍∈文檔流；

仍占用原默認位置（周邊元素也能看到其默認位置）；

相對定位元素的位移是相對于元素自身的邊緣。

• 應用場景：

給其嵌套標簽設定一個新的參照點（創建新的定位環境）。?

事實上，一個相對定位元素同時設置了“top”和“bottom”位移屬性值，實際上“top”優先級高于“bottom”。然而，一個相對定位元素同時設置了“left”和“right”位移屬性，他們的優先級取決于頁面使用的是哪種語言，例如，如果你的頁面是英文頁面，那么“left”位移屬性優先級高，如果你的頁面是阿拉伯語，那么“right”的位移屬性優先級高。

---

? 3.absolute

• 絕對定位元素

脫離文檔流；

相對于最近的定位祖先/瀏覽器窗口元素。

簡單來說：

如果元素有一個祖先，祖先的position設為 relative/ absolute/ fixed，元素將相對于祖先元素的邊定位；

若元素沒有包含在另一個定位元素中，它將相對于初始包含塊（根html元素）定位。

一旦定位一個元素，它將變為它包含的所有元素的新包含塊。轉變元素為包含塊的一種方法：position: relative; 但不設置偏移值來移動它。（也反映出，相對定位元素通常用于為絕對定位元素創建“定位環境”。）

?

• 相對定位的祖先ancestor + 絕對定位元素elem：

若 elem 沒有設置盒子位移屬性，elem 的頂部、左部，會和設置了相對定位的父元素的頂邊、左邊重合。（多個elem會重疊）

若 elem 設置了盒子位移屬性，elem 會對于設置了相抵定位的祖先元素邊緣進行移位。

? 當一個絕對定位的元素有固定的高度和寬度，并且盒子位移同時設置了“top”和“bottom”時，“top”更具優先組，另外和相對定位元素一樣，當同時設置了“left”和“right”時，優先級取決于他的頁面使用的語言。 ?

當一個絕對定位的元素沒有明確指定高度和寬度，同時使用盒子位移的“top”和“bottom”屬性時，會使整個元素的高度跨越整個容器。同樣的，當這個元素同時使用位移“left”和“right”屬性值，會使整個元素的寬度跨越整個容器。如果同時使用位移四個屬性，可以指定一個寬度和高度顯示元素。（這個時候絕對定位元素的寬度和高度都是100%。）

box-1 不指定height, width； ? ? ? ? ?top: 10px; bottom: 10px; ?/* 同時使用top, bottom, 高度跨越整個容器 */ ? ? ? ? ?left: 10px; right: 10px; ? ? ?/* 同時適應left, right, 寬度跨越整個容器 */

• 應用場景：

適合于簡單的實際細節：e.g. 日期放在標題右下角；圖片移除其包裝塊；說明文字放在照片之上。

?

---

4.fixed

• 固定定位元素

偏移值總是相對于瀏覽器窗口；即使該元素被放在另一個 relative / absolute 定位的標簽里也一樣。

固定元素總是可見，即便內容在滾動。

用于創建固定側邊欄，或者模仿HTML框架效果。

?

---

? 5.實驗：static, relative, absolute中，父元素-子元素高度關系

• static

此例中，子元素 box-xx 設置height，父元素 box-set 不設置height。 父元素的高度由子元素高度撐起（子元素原始高度） 子元素 height: 40px; 子元素 height: 80px;

• 相對定位元素

此例中，子元素 box-xx 設置height，父元素 box-set 不設置height。 父元素的高度由子元素高度撐起（子元素原始高度，與位移無關） 子元素 height: 40px; 子元素 height: 80px;

• 絕對定位元素：父元素relative，子元素absolute

此例中，子元素 box-xx 設置height，父元素 box-set 也設置了height。 父元素的高度并非由子元素高度撐起；（absolute 元素脫離了文檔流） 但二者之間存在聯系：子元素是相對于父元素的邊緣進行位移 父元素 height: 200px; 子元素 height: 80px; 父元素 height: 200px; 子元素 height: 20px; 父元素 height: 100px; 子元素 height: 80px; 父元素 height: 10px; 子元素 height: 80px; 父元素 height: 0; 子元素 height: 80px; 實驗源碼下載，可見我的github?，路徑：baiduProj/task4-center/position/

---

6.z-index z-index 表示定位元素在網頁上堆疊的順序。 一般情況，定位元素的堆疊順序是按照其HTML代碼順序進行的。e.g. 兩個絕對定位的<div>，第二個<div>會出現在第一個<div>的上層。 但，可以通過 z-index 來控制定位元素的堆疊順序。z-index 值越大，越處于頂層。

• 同一個父元素包裹的子元素比較 z-index 才有意義。?
• 不同父元素下的子元素，其堆疊順序遵循父元素的堆疊順序。
• 定位的父元素parent和子元素a, b，parent 的 z-index 值是a, b 的堆疊起點，即使 parent(z-index: 1000)，a(z-index: 1)，b(z-index: 3)，a, b的z-index相對 parent 更小, 但仍位于 parent 上層。

---

7.參考資料 HTML和CSS高級指南之二——定位詳解 ? ? ? ? ?

轉載于:https://www.cnblogs.com/xhz-dalalala/p/5492559.html

總結

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

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