文檔流和z‐index - daniel-qa/Vue GitHub Wiki

文檔流和z-index

• 文檔流 (Document Flow)

定義：HTML 和 CSS 預設的顯示順序

特性：元素按照 HTML 代碼順序從上到下排列

佔據空間：在文檔流中的元素會佔據空間，影響其他元素位置

• 堆疊上下文 (Stacking Context)

定義：用來決定元素層級顯示順序的機制

建立條件：元素的 position 值不為 static 時建立

Position	值是否在文檔流	z-index 是否生效	定位參考	使用場景
static	✅ 在文檔流中	❌ 無效	-	預設狀態
relative	✅ 在文檔流中	✅ 有效	自身原位置	最常用，不影響佈局
absolute	❌ 脫離文檔流	✅ 有效	最近的定位祖先	精確定位
fixed	❌ 脫離文檔流	✅ 有效	視窗	固定位置
sticky	部分脫離	✅ 有效	視窗	黏性定位

• 基本規則

預設值：所有 DOM 元素預設 z-index: 0

數值規則：數值越大 = 層級越高 = 越上層顯示

生效條件：只對已定位元素（position ≠ static）有效

• 常見 z-index 慣例

css.background { z-index: 0; }        /* 背景層 */
.content { z-index: 1; }           /* 一般內容 */
.dropdown { z-index: 100; }        /* 下拉選單 */
.tooltip { z-index: 500; }         /* 工具提示 */
.modal { z-index: 1000; }          /* 彈窗 */
.loading { z-index: 9999; }        /* 載入畫面 */

• 基本使用

css.product-item {
  position: relative; /* 建立定位上下文，讓 z-index 生效 */
  z-index: 1;         /* 確保不會被固定元素覆蓋 */
}

解讀：

產品項目保持在文檔流中（按 HTML 順序顯示）

層級設為 1，高於預設的 0

會顯示在一般元素上方，但低於更高 z-index 的元素