CSS z-index 解決 div 覆蓋問題：動態 append 元素層級控制

問題場景

• MVC View 頁面加載時渲染 Div1（靜態 HTML）。
• JS 初始化腳本運行時，append 動態創建 Div2 插入頁面。
• 兩者位置重疊，Div2 後添加，默認覆蓋 Div1。需求：Div1 在上層。

核心解決方案：z-index

為靜態 Div1 設置更高的 z-index，且確保兩者均為定位元素（position: relative/absolute/fixed）。

CSS 代碼

#Div1 {
    position: relative; /* 或 absolute/fixed */
    z-index: 10;        /* 高層級 */
}

#Div2 {
    position: relative; /* 必須定位，z-index 才生效 */
    z-index: 5;         /* 低層級 */
}

關鍵知識點

1. z-index 僅對定位元素生效（position 不為 static）。
2. 堆疊上下文：父元素若形成堆疊上下文（如 opacity < 1、transform、filter 等），子元素 z-index 僅在父內部比較，無法跨越父層級。
3. 同層級比較：同一堆疊上下文中，z-index 大者在上；相同則後寫入者在上（即 DOM 順序）。

進階場景：動態插入時自動計算 z-index

// JS 動態插入 Div2 時，自動設置比 Div1 低
const div1 = document.getElementById('Div1');
const div2 = document.createElement('div');
div2.id = 'Div2';
div2.style.position = 'relative';
div2.style.zIndex = (parseInt(window.getComputedStyle(div1).zIndex) || 0) - 1;
document.body.appendChild(div2);

總結

靜態元素 Div1 設置 position: relative; z-index: 10，動態 Div2 設置 position: relative; z-index: 5（或 JS 計算），即可確保 Div1 永遠覆蓋 Div2。