Angular 5 将嵌套组件中的定位 div 固定为背景蒙版答案

【问题标题】：Angular 5 fixed positioned div in nested component as background maskAngular 5 将嵌套组件中的定位 div 固定为背景蒙版
【发布时间】：2018-04-03 03:22:00
【问题描述】：

在我的 Angular 5 应用程序中，我嵌套了带有多个子路径/组件的路由器插座。在我的一些子路由中，我必须调用 API，在等待答案时，我想显示一个覆盖整个应用程序并为用户显示一些警告/状态的背景（掩码），为此我正在使用具有以下类的固定定位 div：

.mask {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 500;
  background-color: rgba(0,0,0,0.7)
}

问题是这个路由器插座与另一个创建导航栏和左侧菜单的组件共存：

<app-internal-navbar></app-internal-navbar>

<div class="app-container">
  <router-outlet></router-outlet>
</div>

当我在我的路由器出口路径或子路径之一中创建掩码元素时，此元素不会隐藏整个应用程序，仅覆盖路由器出口容器。它似乎是相对于 router-outlet 元素的绝对定位，而不是整个窗口。

如何使这些嵌套的掩码元素覆盖整个应用程序而不将它们移动到其他组件？

谢谢！

【问题讨论】：

标签： html css angular angular5

【解决方案1】：

这可以通过简单的 CSS 来实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .main{
        height: 300px;
        background-color: blue;
        position: relative;
        color: blanchedalmond;
    }
    .pop-up{
        position: absolute;
        z-index: 10;
        background-color: rgba(0,0,0, 0.9);
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    </style>
</head>
<body>
    <div class="main">
        <h1>Sample</h1>
        asdfasdfasd 
        asdfasdfasdf
        asdf
        asdf
        asdf
        asdf
        <div id="popup" class="pop-up">
            <button onclick="document.getElementById('popup').style.display='none'">CLOSE</button>
        </div>
    </div>
    
</body>
</html>

【讨论】：

您可以使用子组件中的角度功能显示和隐藏弹出窗口。
这里的诀窍是为具有position: absolute 的div 的直接父级保留position relative。
感谢您的回答，Ganesh，但这在 Angular 5 组件中根本不起作用，我不知道为什么......在我的情况下，这个弹出窗口不能绝对定位，因为我有一个顶部导航栏，它与我的主要组件共存，它也必须被我的掩码覆盖。
我的应用程序似乎误解了我的组件与浏览器窗口，并且固定位置根本不起作用。
是的位置固定不能解决问题，如果你有时间可以给我发一个有类似问题的 plunker，以便我可以处理它并发布更新？无论如何，我会以我的理解效仿这一点。

【解决方案2】：

我发现父组件中的以下样式导致了这个问题：

.app-container {
  transition: 0.4s;
  transform: translateX(250px);
  will-change: transform;
  width: calc(100% - 250px);
  @media (max-width: 800px) {
    transform: translateX(0);
    width: 100%;
  }
}

由于某种原因，transform 属性与 will-change:transform 相结合使子固定定位元素根本不固定。这似乎是 chrome 中的一个错误，所以我必须找到一种解决方法，使用边距而不是转换......

【讨论】：