聲明：本文源自《精通CSS：高級web標準解決方案》(第3版)
一、定位：static relative absolute fixed
1. 概念：
static(靜態定位)：塊級元素垂直堆疊
relative (相對定位)：真正的用途：可以爲 “後代元素” 創造 “定位上下文” ；相對其 “原始位置” 控制該元素的 “偏移量”，同時不影響周圍其他的元素。
absolute(絕對定位)：相對其最近的 “定位上下文” || “非static定位的‘祖先元素’” || “html元素”，進行定位 。會脫離文檔流
fixed(固定定位)：其“定位上下文”被自動設置爲瀏覽器視口， 脫離文檔流。
2. 應用場景：
“絕對定位”-->非常適合 “創建彈出層”，“提示”，“對話框”，這類覆蓋於其他內容之上的組件。
示例：關於 提示框的 實現：
基於僞類after 利用border的特性實現三角形
場景：利用偏移實現自動大小
relative + absolute 實現， 前者生成 “定位上下文”, 後者加上 top bottom left right 這些偏移量的控制，設置其中3個 自動控制剩餘的1個。
比如：如下的設置，指定右、下、左邊距，上空間通過自動計算
.photo-header {
position: relative;
}
.photo-header-plate {
position: absolute;
right: 4em;
bottom: 4em;
left: 4em;
}
<header class="photo-header">
<div class="photo-header-plate"></div>
</header>
3. 定位與z-index: 堆疊內容的陷阱
靜態定位(static)以外的元素會根據他們在代碼樹中的深度依次疊放，這個次序可以通過z-index來調整。z-index只要設爲正值，就會出現在未設置z-index元素的上方。
“堆疊上下文”，是由特定屬性和值創建的。有一個“根堆疊上下文”，所有的z-index不是auto的定位元素都會出現在這個上下文中排序。隨着其他上下文的建立，就會出現堆疊層級。
舉例：
1. 任何設定了position: absolute及值不是auto的z-index屬性的元素，都會創建一個自己後代元素的堆疊上下文
2. 在一個堆疊上下文的內部，無論z-index的值多大或多小，都不會影響“其他堆疊上下文”。
3. opacity的值小於1的元素可以觸發新的堆疊上下文，因爲該元素需要 “獨立” 渲染（包括它的所有後代元素）
4. transform和filter屬性，也會觸發創建新的“堆疊上下文”