Bootstrap 下拉選單被輸入框遮擋：z-index 層級衝突的診斷與修正

現象

Navbar 下拉選單 (`dropdown-menu`) 彈出時被鄰近的 `` 遮擋，調整 `z-index` 無效。

根本原因

• 輸入框所在父元素建立了 **新的堆疊上下文** (如 `position: relative` + `z-index: 0` 或 `transform`/`opacity`/`filter` 非預設值)。
• 下拉選單雖有高 `z-index`，但屬於不同堆疊上下文，無法跨層級比較。

診斷步驟 (F12 開發者工具)

1. 選取被遮擋的 `` → Computed 面板 → 搜尋 `z-index`、`position`、`transform`、`opacity`、`filter`、`isolation`。
2. 向上巡覽父元素，找到最近的 **建立堆疊上下文的祖先**。
3. 同理檢查 `.dropdown-menu` 及其祖先鏈。

修正策略

1. 移除不必要的堆疊上下文：將父元素的 `z-index: 0` 改為 `auto`，或移除 `transform` 等屬性。
2. 統一提升層級：在共同祖先 (如 `` 或頂層容器) 設定 `z-index` 確保下拉選單容器層級高於輸入框容器。
3. 將下拉選單移至 body 直屬 (Bootstrap 5 預設行為)：

   <div class="dropdown">
     <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">選單</button>
     <ul class="dropdown-menu" data-bs-popper="static">...</ul>
   </div>
   

   Bootstrap 5 會自動將 `.dropdown-menu` 附加至 `` 並由 Popper.js 定位，避開父層堆疊上下文。

快速修補 (不改結構)

.dropdown-menu {
    z-index: 1050 !important; /* Bootstrap modal-backdrop 為 1040, modal 為 1050 */
}
.input-container { /* 輸入框的堆疊上下文建立者 */
    z-index: auto !important;
}

優先採用「移除多餘堆疊上下文」或「升級 Bootstrap 5」從根本解決。