子组件不覆盖整个页面

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;