Question

我有一个角度5应用程序，其中有一个进程的processdetails的路由。在通过路由器链接导航到路线并单击模态弹出按钮时，将打开模态弹出窗口。

Modal弹出窗口的css属性位置值已修复，但尽管将css属性的最高值设为0，但它并未固定在顶部。

但是，当我刷新页面时，模态弹出窗口固定在顶部。有人可以解释为什么会这样。下面是模态弹出窗口的css

modal-popup .overlay {
        display: block;
        position: fixed;
        bottom: 0;
        top: 0;
        left: 0px;
        opacity: 0;
        right: 0;
        height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        z-index: 1000;
        cursor: pointer;
    }

模态弹出窗口位于文档元素的深处，尽管根据我的知识它应该工作，因为固定的位置应该相对于视口固定

Answer 1

我发现了这个问题。模态弹出组件的一个祖先是通过为角度应用程序创建的动画服务将变换属性应用于它。

当祖先具有变换，透视或过滤属性时设置为非以外的东西，祖先用作容器而不是视口。

MDN

这就是为什么css固定位置和顶部值0没有按预期工作的原因，在这种情况下，模态弹出不在顶部。在刷新时，它工作正常，因为在其中一个祖先上设置转换属性的动画不会在刷新时触发，而是仅在路径更改时触发

固定为前0的CSS位置仅适用于刷新

1 个答案: