相信很多同學(xué)在編寫、設(shè)計(jì)網(wǎng)站的時(shí)候多多少少用過css里的position這個(gè)屬性，但是很多時(shí)候網(wǎng)頁(yè)顯示出來的和自己想象的不太一樣，這篇筆記來教你怎么使用position。

position屬性一共有5個(gè)不同的值，下表借鑒于W3Schools

熟悉了表格里的屬性后，請(qǐng)看如下代碼示例：

<div class="outer"> <!-- 黑色 -->
  <div class="inner1"></div> <!-- 紅色 -->
  <div class="inner2"></div> <!-- 黃色 -->
  <div class="inner3"></div> <!-- 藍(lán)色 -->
</div>

.outer {
  width: 400px;
  height: 300px;
  background: black;
  margin: auto;
  position: absolute;
  z-index: -1;
}

.inner1 {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
}

.inner2 {
  width: 100px;
  height: 100px;
  background: yellow;
  position: relative;
  left: 100px;
}

.inner3 {
  width: 100px;
  height: 100px;
  background: blue;
  position: inherit; /* absolute */
  left: 50px;
  top: 50px;
  /* z-index: -1; */
}

上方代碼執(zhí)行結(jié)果

1. 設(shè)置了一個(gè)外部container，為三個(gè)inner的父元素，absolute絕對(duì)定位
2. 子元素 inner1 被設(shè)為absolute，使其跳出了當(dāng)前DOM流的約束

• 因?yàn)楦冈夭皇莝tatic，所以子元素將相對(duì)于父元素來定位。
• 當(dāng)top, bottom, left, right四個(gè)屬性沒有被賦值時(shí)，并且父元素里沒有其它元素在DOM tree里位于它前面時(shí)，它將位于父元素的左上角；有其它元素在它前面時(shí)，它將位于此元素下面的左上角。
• 當(dāng)top, bottom, left, right四個(gè)屬性被賦值時(shí)，它的位置將相對(duì)于父元素來定位。
• 如果父元素為static，那么absolute元素將相對(duì)于瀏覽器絕對(duì)定位。

3. 子元素 inner2 被設(shè)為relative，它將相對(duì)于正常位置，通過left, right, top, bottom來定位

• 重要：inner2的left被設(shè)置為100px，但它卻緊挨著inner1元素，由此可以看出inner1元素因被設(shè)置為absolute絕對(duì)定位而脫離了DOM，不然inner2應(yīng)該距離inner1 100px的長(zhǎng)度。

4. 子元素 inner3 用來解釋inherit和屬性z-index

• inner3繼承了父元素outer的position屬性的值，所以為absolute。
• z-index屬性 非常有用，用來設(shè)置z軸上元素的排列，也就是上下層疊關(guān)系，值越大元素越在上層。z-index在UI布局上發(fā)揮了很大作用，讓手機(jī)屏幕成為了一個(gè)三維空間，著名的Material UI對(duì)z-index的應(yīng)用是一個(gè)典例。

5. fixed在例子中沒有出現(xiàn)，fixed的元素將相對(duì)于viewport（視口）進(jìn)行定位，不受何上下滾動(dòng)條的約束，感興趣的同學(xué)可以去嘗試一下。
6. 最后，給大家一個(gè)在線編輯代碼的地址，可以去自己嘗試一下，自己動(dòng)手永遠(yuǎn)記得更加深刻

• CSS position屬性嘗試 on JSfiddle