做一个覆盖以覆盖另一个元素的高度

Question

我在屏幕上有许多元素需要覆盖覆盖。元素大小不同，可以在页面生命周期内调整大小。

我可以使用此CSS在需要的地方放置叠加层，但100％高度不起作用：

.upgrade {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

CSS中是否有任何方法可以将一个元素设置为完全覆盖另一个元素。如果CSS不是一个选项，我的后备计划是使用jQuery / JavaScript设置初始高度，然后跟踪resize事件。我希望这是正确的行动方针......

但是，我真的希望用CSS解决100％高度问题。非常感谢您的帮助！

Answer 1

将绝对定位的元素放在HTML应包含的元素中。然后制作要覆盖的元素position: relative;。

之后，您将绝对定位元素的CSS修改为：

.upgrade {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
}

绝对定位的元素现在将相对于具有相对位置的最近父元素定位。因此，top，bottom，left和right将与该元素相关而不是整个文档 - 因此您应该覆盖整个元素。

<强>更新

MDN提供了有关绝对定位的更多信息。 CSS-Tricks在此主题上也有a short article。