固定div不会忽略父div的宽度/高度/位置约束

Question

我正在用Vue.js实现一个简单的应用程序，并希望添加一个充当弹出窗口的组件。我通常所做的并且一直为我工作的就是在CSS中添加具有以下代码的div：

    .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结构：

覆盖层包含在div中，类为traitGenerator container medium，覆盖层为div traitSelector popupBg

我之前在项目中做过多次相同的过程，但这使我感到困惑。这不是全部的观点：修正它忽略了DOM中的所有其他内容吗？我在做什么错了？

Answer 1

父div可能设置了transform属性。引用docs：

  

相对于已建立的初始包含块定位   通过视口，除非其中一个祖先进行了变换，   透视图，或将filter属性设置为无（参见）   CSS转换规范），在这种情况下，祖先的行为就像   包含块。