子组件不覆盖整个页面答案

【问题标题】：Child component doesn't cover whole page子组件不覆盖整个页面
【发布时间】：2020-04-17 12:50:00
【问题描述】：

我想在子组件中制作背景覆盖。但即使我将position 放在absolute 上，它也不会覆盖整个页面。

这是我在子组件的 css 中所做的：

#background-overlay{
  position: absolute !important;
  display: block !important;
  background-color: rgba(0, 0, 0, 0.5);
  padding:0;
  margin:0;

  top:0;
  left:0;

  width: 100vh;
  height: 100vw;
}

Stackblitz 示例：https://stackblitz.com/edit/angular-rjiujw

【问题讨论】：

如果你想要整个页面你可以使用position: fixed而不是absolute
这能回答你的问题吗？ Making a div that covers the entire page
不抱歉，这两个建议都不适合我。（参见 stackblitz 示例）

标签： css angular ionic-framework ionic-native

【解决方案1】：

高宽切换，应该是：

width: 100vw;
height: 100vh;

【讨论】：

啊，是的，这适用于我的示例，但不幸的是不适用于我的实际环境。显然我无法准确模拟它。
我已经编辑了 stackblitz 示例来展示它的实际情况。现在我发现了不同之处，我认为ng-content 导致了这个问题。
当我使用position: fixed 时，这个问题不存在，但不幸的是它在我的代码中不起作用.. 我放弃了我无法在堆栈上模拟它我必须继续试图弄清楚自己解决。
这个问题只存在于离子框架的移动视图中，我认为其他东西会干扰它，所以我别无选择，只能现在接受这个答案，因为我无法模拟我的问题。也许它会帮助别人。
如果叠加层的父级为position:relative，则叠加层坐标从父级开始。 <div style="position:relative;height: 100px;top:15px; left:15px"> <div style="position: absolute; left:0; top:0; width: 50px; height:50px;background-color: red;"> </div> 内部 div 0,0 位于屏幕上的父 div 15,15。