固定 div 不忽略父 div width/height/position 约束

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

覆盖层包含在 div 和 class traitGenerator container medium 内，覆盖层是 div traitSelector popupBg

我以前在项目中做过很多次相同的过程，但这一次让我感到困惑。 position: fixed 的重点不是忽略了 DOM 中的所有其他内容吗？我做错了什么？

Answer 1

父 div 可能设置了 transform 属性。引自 docs:

It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block.

固定 div 不忽略父 div width/height/position 约束

Fixed div is doesn't ignore parent div width/height/position constraints

html

css

vue.js