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

---

? 1.static

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

---

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

• relative + 位移屬性：

仍∈文檔流；

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

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

• 應(yīng)用場景：

給其嵌套標(biāo)簽設(shè)定一個新的參照點（創(chuàng)建新的定位環(huán)境）。?

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

---

? 3.absolute

• 絕對定位元素

脫離文檔流；

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

簡單來說：

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

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

一旦定位一個元素，它將變?yōu)樗乃性氐男掳瑝K。轉(zhuǎn)變元素為包含塊的一種方法：position: relative; 但不設(shè)置偏移值來移動它。（也反映出，相對定位元素通常用于為絕對定位元素創(chuàng)建“定位環(huán)境”。）

?

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

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

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

? 當(dāng)一個絕對定位的元素有固定的高度和寬度，并且盒子位移同時設(shè)置了“top”和“bottom”時，“top”更具優(yōu)先組，另外和相對定位元素一樣，當(dāng)同時設(shè)置了“l(fā)eft”和“right”時，優(yōu)先級取決于他的頁面使用的語言。 ?

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

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

• 應(yīng)用場景：

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

?

---

4.fixed

• 固定定位元素

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

固定元素總是可見，即便內(nèi)容在滾動。

用于創(chuàng)建固定側(cè)邊欄，或者模仿HTML框架效果。

?

---

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

• static

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

• 相對定位元素

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

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

此例中，子元素 box-xx 設(shè)置height，父元素 box-set 也設(shè)置了height。 父元素的高度并非由子元素高度撐起；（absolute 元素脫離了文檔流） 但二者之間存在聯(lián)系：子元素是相對于父元素的邊緣進行位移 父元素 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 表示定位元素在網(wǎng)頁上堆疊的順序。 一般情況，定位元素的堆疊順序是按照其HTML代碼順序進行的。e.g. 兩個絕對定位的<div>，第二個<div>會出現(xiàn)在第一個<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高級指南之二——定位詳解 ? ? ? ? ?

轉(zhuǎn)載于:https://www.cnblogs.com/xhz-dalalala/p/5492559.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。