子组件不能覆盖整个页面

Question

我想在子组件中进行背景叠加。但是即使我将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

Answer 1

高度和宽度已切换，它们应为：

width: 100vw;
height: 100vh;