z-index能不能解释下呢?

来源:2-5 position-relative

怒焰狂暴

2020-01-02 17:04:49

文档里面写的好绕口呀...老师能不能直接解释下呢

写回答

1回答

好帮手慕夭夭

2020-01-02

同学你好,z-index是设置定位元素的层级的。示例:

两个定位元素,默认情况下,后面的定位元素要比前面的定位元素层级大。

http://img.mukewang.com/climg/5e0dbb0309bd09e304230413.jpg

所以粉色盒子会把红色盒子盖住,如下所示:

http://img.mukewang.com/climg/5e0dbb2d099e26cc02000156.jpg

如果想要让红色盒子显示在上面,就给它设置一个层级:

http://img.mukewang.com/climg/5e0dbb6109b4a4bb03400161.jpg

粉色盒子没有设置z-index的时候,红色盒子的z-index: 1只要设置值是大于等于1的整数,就能把粉色盒子盖住。显示如下:

http://img.mukewang.com/climg/5e0dbb6d09cf513802140147.jpg

如果粉色盒子也设置了z-index,那么红色盒子的z-index值比它大,层级就比它高。

http://img.mukewang.com/climg/5e0dbbea09d095cf04220339.jpg

如上设置之后,红色层级大:

http://img.mukewang.com/climg/5e0dbbf809f8630a01960161.jpg

按照如上去理解即可。如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程