固定 div 不會忽略父 div 的寬度/高度/位置約束

Question

我正在使用 Vue.js 實現一個簡單的應用程序，並希望添加一個充當彈出窗口的組件。 我通常做的並且一直為我工作的是將帶有以下代碼的 div 添加到 css 中：

    .popupBg {
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 5;
        width: 100%;
        height: 100%;
    }

這個 div 充當覆蓋半透明背景，並在其中嵌套了另一個 div，它是實際的彈出表單容器。

我昨天已經建立了一個干凈的新 vuejs 項目，並想添加一個這樣的帶有覆蓋層的彈出窗口，但是由於某種原因，固定的 div 保留在其父 div 之一的內部，而不是延伸到整個 html 頁面。

應用程序：

html結構：

覆蓋層包含在具有類traitGenerator container medium的 div 內，覆蓋層是 div traitSelector popupBg

我以前在項目中做過很多次相同的程序，但這一次讓我感到困惑。 不是全部的 position: fixed 忽略 DOM 中的所有其他內容嗎？ 我究竟做錯了什么？

Answer 1

父 div 可能設置了transform屬性。 來自文檔的引用：

它相對於視口建立的初始包含塊定位，除非它的祖先之一將變換、透視或過濾器屬性設置為無以外的其他內容（請參閱 CSS 轉換規范），在這種情況下，祖先表現為包含塊。