覆盖元素的实用程序类 | CSS-Tricks

Michelle Barker 这里也提到了这一点。

以下是我在 CSS 中反复需要执行的操作：用另一个元素完全覆盖一个元素。每次使用的 CSS 都一样：第一个元素（需要覆盖的元素）应用了 position: relative 。第二个元素具有 position: absolute ，并且定位方式使所有四个边都与第一个元素的边缘对齐。

.original-element {
  position: relative;
}

.covering-element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

我不知为何一直认为使用 bottom 和 right“不可靠”，使用 top 和 left 然后设置 width: 100% 和 height: 100% 更安全。但我已经记不清原因了——也许是旧版浏览器的问题？

但说到现代化，我最喜欢 Michelle 文章中的这部分

.overlay {
  position: absolute;
  inset: 0;
}

inset 属性是逻辑属性，在这里非常方便！阅读这篇文章，了解更多关于 CSS 网格的技巧。

Karl Swedberg

# 2020年12月26日

有趣，Chris——我也认为 100% 宽度/高度更“可靠”。也许是 IE 6-8 时代的事？

Chris Coyier

评论永久链接# 2020年12月26日

可能！讽刺的是，这样做的结果是，如果未设置 box-sizing，您必须担心填充或边框导致溢出。此外，您可能是在伪元素上执行此操作，这意味着您还需要记住在伪元素上设置 box-sizing。

Dion

# 2020年12月26日

right: 0; bottom: 0 无法与一些具有固有宽度/高度的元素配合使用，例如 iframe 或视频。也许这仅适用于 IE 11，但不幸的是，这意味着没有通用的实用程序类可用于此用例。
如果父元素有任何填充或没有定义高度，则 width: 0; height: 0 也不起作用。

dean king

# 2020年12月27日

是否可以在 RGB 颜色值上放置透明图片，以创建珍珠车漆效果？

James

# 2020年12月29日

父容器

.container{
display: grid;
grid-template-areas: 'hero'
}
.container > *{
grid-area: hero
}

David

# 2020年12月30日

inset 技巧似乎在 Safari 中不起作用。

此评论线程已关闭。如果您有重要信息要分享，请联系我们。