使用grid-area等Grid布局属性轻松实现元素层叠效果
source link: https://www.zhangxinxu.com/wordpress/2021/02/grid-area-absolute-cover/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9805
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。
一、引言
元素层叠通常有下面2个方法：
- margin负值定位；
- 绝对定位；
而 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
（本篇完）
Recommend
-
29
最近在纠结程序语言和设计语言中的一些概念，整到层叠上下文和图层相关的事情，然后发现自己对于CSS中的层叠相关的知识并没有自己想象中那样理解的透彻。因此花了一段时间重新梳理了一下相关的知识。 如果想要理解清楚CSS中的层...
-
26
前言 最近，在项目中遇到一个关于CSS中元素z-index属性的问题，具体问题不太好描述，总结起来就是当给元素和父元素色设置position属性和z-index相关属性后，页面上渲染的元素层级结果和我预想的不一样。根据自己之前的理解，也没找到一个合理的解释。我
-
33
最近在项目的过程中遇到了一个问题，menu-bar希望始终显示在最上面，而在之后的元素都显示在它之下，当时设置了 z-index 也没有效果，不知道什么原因，因此找了一下css有关层叠方面的资料，解决了这个问题，这里记录一下~ 屏幕是一个二维平面，然而HTML
-
47
在日常开发中，我们经常会遇到元素需要被遮盖的场景。在这种场景下绝大多数前端开发的第一反应是使用z-index来设定元素的层叠关系，但是在一些情况下z-index并不是会如果我们预期那样正常工作。究其背后的...
-
34
1. 问题现象 最近在做一个网站的首页，首页的右上角有一个绝对定位的大动画，同时首页还有三个小动画，小动画部分的效果是：鼠标滑入特定区域（如下图），展示动画。 由于 UI 提供的动画画布很大，所以遮盖住了下图所...
-
13
文章目录 Z 轴上的显示顺序元素 Z 轴对比四、两个概念，层叠顺序、层叠等级五、层叠规则六、参考文章
-
13
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=5115
-
7
在日常开发中，我们经常会遇到元素需要被遮盖的场景。在这种场景下绝大多数前端开发的第一反应是使用z-index来设定元素的层叠关系，但是在一些情况下z-index并不是会如果我们预期那样正常工作。究其背后的原因，就不得不引入我们今天要聊的层叠上下文（stacking...
-
4
所谓元素层叠问题，就是某些元素原本你希望它出现在外层，结果却被其他元素遮挡了。怎么解决这个问题？ 解决这个问题前，先要搞清楚浏览器渲染元素的规则 1、默认按元素出现先后顺序渲染 默认情况下，渲染元素时，浏览器按照元素的先后...
-
6
好用的illustrator混合命令，实现酷炫层叠字体海报封面 12月 13, 2022 发表于: 视觉设计.
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK