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

【问题标题】：Fixed div is doesn't ignore parent div width/height/position constraints固定 div 不会忽略父 div 宽度/高度/位置约束
【发布时间】：2019-05-02 09:18:34
【问题描述】：

我正在使用 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结构：

覆盖包含在类traitGenerator container medium的div内，覆盖是div traitSelector popupBg

我以前在项目中多次执行相同的程序，但这一次让我感到困惑。不是位置的全部点：固定它忽略DOM中的所有其他内容吗？我做错了什么？

【问题讨论】：

首先，我会检查父 div 是否设置了转换属性。 - “它相对于视口建立的初始包含块定位，除非它的祖先之一的变换、透视或过滤器属性设置为非无（参见 CSS 变换规范），在这种情况下，该祖先表现为包含块。” - developer.mozilla.org/en-US/docs/Web/CSS/position#fixed
嗨，我一直在尝试重现您提供的条目的问题，但它就像一个魅力，请您给我们父 CSS 吗？（工作用例：jsfiddle.net/g0zkq6r4/2）
哦哇@CsabaFarkas 非常感谢你！我在限制覆盖的父 div 上进行了转换，并且不知道这种交互。现在可以了。
@BadAyka 很高兴听到这个消息。我将其添加为答案，因此这也可能对其他人有所帮助。

标签： html css vue.js

【解决方案1】：

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

相对于建立的初始包含块定位通过视口，除非它的祖先之一具有变换，透视图或过滤器属性设置为非无（请参阅 CSS 转换规范），在这种情况下，祖先的行为与包含块。

【讨论】：