使用grid-area等Grid布局属性轻松实现元素层叠效果

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9805

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、引言

元素层叠通常有下面2个方法：

1. margin负值定位；
2. 绝对定位；

而 relative 和 translate 偏移虽然也能够实现层叠效果，但是元素原本的位置还保留，都是在特殊场景下使用。

OK，现在，给大家介绍一个全新的实现层叠元素的方法，使用Grid布局，控制非常方便，日后可能会成为最受欢迎的元素层叠方法。

二、需求与实现

实现如下图所示的排版效果，一段关于图片的信息浮在图片上。

传统实现，多使用绝对定位实现，外层relative限制，提示信息absolute绝对定位；然后CSS功力好一点的会使用margin负值往上偏移一下实现。

到了新时代，以上两个方法都已经不是最佳实践了。

使用Grid布局，可以非常方便让元素重叠在一起。

只需要让grid子项都占用同一个网格就好了。

假设HTML结构如下：

<figure>
    <img src="11.jpg">
    <figcaption>上海钓鱼自然风景 by zhangxinxu</figcaption>
</figure>

核心代码只需要这么两句：

figure {
    display: inline-grid;
}
figure > img,
figure > figcaption {
    /* 还可以简写为 grid-area: 1 / 2 */
    grid-area: 1 / 1 / 2 / 2;
}

此时， <img> 图像和 <figcaption> 图像信息自然就重叠在一起了。

此时，只需要使用 align-self:end 属性调整 <figcaption> 元素的位置在底部，效果就可以实现了。

眼见为实，您可以狠狠地点击这里： Grid布局实现元素上下层叠效果demo

<figcaption> 元素具体的样式CSS如下：

figcaption {
    align-self: end;
    text-align: center;
    background-color: #0009;
    color: #fff;
    line-height: 2;
}

//zxx: 如果你看到这段文字，说明你现在访问是体验糟糕的垃圾盗版网站，你可以访问原文获得很好的体验：https://www.zhangxinxu.com/wordpress/?p=9805（作者张鑫旭）

三、grid布局实现的优点

使用Grid布局实现元素重叠的好处在于可以非常方便地控制元素的位置，以及是否拉伸显示等。

例如设置 align-self:stretch 可以实现100%黑色半透明覆盖效果：

figcaption {
    align-self: stretch;
    ...
}

设置 align-self:start 则图片信息可以轻松定位到顶部：

figcaption {
    align-self: start;
    ...
}

以及，Grid布局实现的元素层叠并没有改变容器元素的层叠上下文关系以及绝对定位元素的包含块关系，这一点也关键时候还是很有用的。

四、原理介绍及其他属性的实现

grid-area 属性可以指定grid子项所占用的网格。

其中语法如下：

grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;

也就是可以通过网格名称指定，也可以通过网格区域的纵横起始位置指定。

grid-area:1/1/2/2 就是通过指定网格起止位置确定的占用的哪个网格。

4个值依次表示 <row-start> / <column-start> / <row-end> / <column-end> 。

所以1/1/2/2表示“第1行开始/第1列开始/第2行结束/第2列结束”的网格，也就是第1个格子。

所以下面CSS表示 <img> 和 <figcaption> 元素均占用第1个网格：

figure > img,
figure > figcaption {
    grid-area: 1 / 1 / 2 / 2;
}

于是就发生了重叠。

从原理想到其他实现方法

因此，理论上，只需要让元素占用同一个网格，就能让元素重叠。

因此，还有其他语法和其他CSS属性可以让元素重叠。

例如使用 grid-template-areas 指定网格名称（下面使用了 grid 属性简写语法）：

figure {
    display: inline-grid;
    grid: "fishing";
}
figure > img,
figure > figcaption {
    grid-area: fishing;
}

其中 fishing 是任意命名名称，使用中文也是可以的。例如：

figure {
    display: inline-grid;
    grid: "鱼";
}
figure > img,
figure > figcaption {
    grid-area: 鱼;
}

也会有如下图所示的效果：

其他Grid布局属性实现

grid-area 其实是 grid-column 和 grid-row 的缩写语法，而 grid-column 和 grid-row 又是 grid-row-start , grid-column-start , grid-row-end 以及 grid-column-end 属性的缩写。

因此，也可以实现网格重叠效果又多了6个CSS属性，例如下面的CSS也是可以的：

figure {
    display: inline-grid;
}
figure > img,
figure > figcaption {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}

又或者下面的CSS代码：

figure {
    display: inline-grid;
}
figure > img,
figure > figcaption {
    grid-row-end: 2;
    grid-column-end: 2;
}

等。

虽然可以实现元素重叠的CSS属性还不少，但最佳实践还是 grid-area 属性，因为是缩写语法，只需要一行就可以满足需求。

如果大家对 grid-area 及其相关属性还不是很了解，可以访问我的这篇热文“ 写给自己看的display: grid布局教程 ”。

五、结语

想不到什么好说的，今天正月初一，那就注大家新年快乐，牛年大吉，恭喜发财，万事如意。

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。

本文地址： https://www.zhangxinxu.com/wordpress/?p=9805

（本篇完）