0

我在屏幕上有许多元素需要用叠加层覆盖。元素具有不同的大小，并且可以在页面的生命周期内调整大小。

我可以使用这个 CSS 在需要的地方放置叠加层，除了 100% 的高度不起作用：

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

CSS中有什么方法可以将一个元素设置为完全覆盖另一个元素。如果 CSS 不是一个选项，我的后备计划是使用 jQuery/JavaScript 设置初始高度，然后跟踪调整大小事件。我希望这是正确的做法...

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

4

1 回答 1

4

将绝对定位的元素放在它应该覆盖的元素中，在您的 HTML 中。然后制作你想要覆盖的元素position: relative;。

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

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

绝对定位的元素现在将相对于最近的具有相对位置的父元素进行定位。因此，顶部、底部、左侧和右侧将与该元素而不是整个文档相关 - 因此您应该覆盖整个元素。

更新：

MDN上提供了有关绝对定位的更多信息。CSS-Tricks 也有一篇关于这个主题的短文。

于 2012-11-28T13:10:33.723 回答