如何在 CSS 中实现图像重叠

注：本文最初发表于我的网站，您可以在这里阅读。

目前网页设计中非常流行的一种技术是图像重叠。当设计稿交给你，作为开发者需要实现它时，就像大多数 CSS 操作一样，有几种方法可以实现图像重叠。

一种方法是，你可以将一个元素的 z-index 值调低，使另一个图像位于其上方，然后调整每个图像的宽度，这样你就可以看到它们，然后就大功告成了，对吧？

嗯……一旦你需要在图片后面添加文字或其他内容，就会遇到问题。如果绝对定位的元素比静态（顶部）图片高，后面的内容就会与图片重叠。这是因为绝对定位的图片高度无法被识别，因为它位于文档流之外（这是绝对定位元素的正常行为）。为了解决这个问题，你可能会尝试给图片设置任意高度，但这样一来，组件很快就会变得非常脆弱、功能受限，而且很不方便。

接下来几天，你会发现自己孤零零地躺在那里，没有食物也没有水，只能喝着自己止不住的眼泪。那地方太黑暗了，我不建议你去。

我所说的例子如下：

好消息是：还有更好的方法，除非你喜欢痛苦，否则不要尝试第一种方法。

我将写出两种可靠的方法来处理重叠的图像，而不会使内容与我们出色的图像组件（我亲切地称之为“图像堆栈”）重叠。

方法一：CSS Grid

在我开始听到关于需要支持 IE 以及无法使用 CSS Grid 的抱怨之前，我想说，你可以使用 CSS Grid，并且可以轻松地为 IE 使用备用方案，我将在本文的最后一部分向你展示如何做到这一点。

CSS Grid 最让我喜欢的功能之一（除了fr单位或min-max属性之外）就是它可以通过改变 z-indices 来重叠图像，而不会破坏正常的文档流！

首先，我们要分析这个组件：

需要注意以下几点：

1. 无论顶部或底部图像的高度如何，该组件都能正常工作。（当客户可以通过内容管理系统上传任意图像时，这一点需要考虑。）
2. 顶部图像始终会略微向下移动，并与容器的左边缘对齐。

HTML结构

       <div class="image-stack">
          <div class="image-stack__item image-stack__item--top">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110238/texture-waves2.jpeg" alt="">
          </div>
          <div class="image-stack__item image-stack__item--bottom">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110238/portrait-1-cropped.jpg" alt="">
          </div>
       </div>

辅助功能提示：如果您知道图像是装饰性图像（例如：波浪图像），并且不会更改，您可以role="presentation"向元素添加属性，这样屏幕阅读器就不会渲染该图像。

我们需要考虑的是网格列的宽度。如前所述，有多种方法可以实现这一点，但我将坚持使用 12 列，因为 12 列网格很常用。

为了实现这一点，我们需要在包含这些元素的父元素上，在 CSS 中编写以下代码：

      .image-stack {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        position: relative;
      }

grid-template-columns这是一个决定网格列数的属性，其1fr值由浏览器计算可用空间。当列或行出现空隙时，它非常有用。浏览器自动计算真是太棒了！

position: relative这一点至关重要：它能确保图像的 z-index 属性按预期工作。

现在我们的网格已经可以正常工作了，下一步是查看图像的宽度：

为了根据设计为每张图片添加宽度，我的思维习惯是按百分比来计算的，所以我们先从图片组件的总宽度开始844px，也就是 100%。顶部图片的宽度是 100% 521px。我用521px / 844px * 100100% 除以 100%，得到 61.7%，向上取整到 62%，得到的数字正好介于 7/12 (58%) 和 8/12 (66%) 之间，哈哈！那就用 66% 吧。

对于顶部的图片，我们将使用以下 CSS 代码：

    .image-stack__item--top {
      grid-column: 1 / span 8;
      grid-row: 1; // must be on the same row as the other image
      padding-top: 20%; // this pushes the image down, and keeps it proportional as it resizes
      z-index: 1; // make this image render on top of the bottom
    }

对于第二张图，我们将计算(645px / 844) * 100 = 76.4%。我们将向下取整到 75%，这正好符合我们的 12 列网格。9/12。因此，为了实现这一点，我们将确保底部图像跨越 9 列，并从第 4 行网格线开始，一直延伸到网格的剩余部分，这就是我们-1所做的。如果这样更容易理解，你可以把 9 行网格线视为-1结束位置！

我们的底部图片 CSS 代码如下所示：

  .image-stack__item--bottom {
    grid-column: 4 / -1;
    grid-row: 1; // make this image be on the same row
  }

瞧！有了 CSS 网格系统和少量代码，你就可以开始实现各种元素的重叠效果，包括文字覆盖图片、文字覆盖文字（哇哦！）、图片覆盖画布等等。只要你能想到的，网络世界就是你的舞台！耶！

方法二：负保证金浮动

所以，如果您需要支持IE浏览器，那么本节内容正适合您。

这种方法确实需要用到“将元素从文档流中移除”这种老套的策略，我们将使用浮动元素来实现！

我的朋友兼经理Jake Fentress提出了这个解决方案，我将其应用到最近的一个客户项目中，因为我们需要支持 IE11。

好消息是结构丝毫没有改变。

对于image-stack父元素，我们将添加 clearfix，因为我们将子元素浮动，并且需要内容渲染在下方：

.image-stack::after {
  content: ' ';
  display: table;
  clear: both;
}

然后，对于顶部的图片，我们将添加：

.image-stack__item--top {
    float: left;
    width: 66%;
    margin-right: -100%;
    padding-top: 15%; // arbitrary
    position: relative;
    z-index: 1;
}

这里的负边距对于实现这个效果至关重要。负边距非常特殊。如果是顶部或底部的负边距，其行为会有所不同；如果是左侧或右侧的负边距，其行为也会有所不同；而且，它们对浮动元素的作用方式也不同。

我们对一个左浮动元素应用了负的右边距，以允许内容重叠。-100% 等于容器的宽度，因此它会将图像向左移动，并允许底部图像在其下方渲染，就好像它不在 DOM 中一样。

Codepen链接在此：

如果您想了解更多关于负利润的信息，我建议您阅读《负利润使用权威指南》。这篇文章深入探讨了负利润的所有应用场景和可能出现的意外情况。

备选方案（CSS 网格和浮动方法）

本部分将为您提供两全其美的方案：现代浏览器的现代 CSS 和 IE11 的备用方案。

这里最重要的部分是@supports特性查询。我们将使用它来检查浏览器是否支持某个值display: grid。在添加特性查询之前，我们首先应用 IE 或备用 CSS @supports。一旦添加了现代 CSS，浮动将不再受到影响，因为网格布局会接管控制权。在支持特性查询中，我们将宽度重置为 100%，您可以移除 float 属性，也可以保留它，因为它对元素没有影响。

以下是最终的 CodePen 示例，展示了这一点：

希望这篇文章对你有所帮助，助你实现布局梦想！尽情发挥创意，把所有东西都叠放在一起吧！

祝您健康！