[前端][CSS]用ps的方式理解层叠上下文
之前看了大佬的对层叠上下文的解释
https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
然后感觉对各种设置了z-index的情况可以用Photoshop里图层的方式来进行一个理解会直观很多。
我们可以把创建层叠上下文 ,看成就像是在ps里面创建了一个组,把子元素放到组里。
而父没有达成创建上下文条件的,子会被类似当成根下的一个单独的图层。
我们这里的创建层叠上下文的方式,主要是用这一条来进行(其他创建方式下的表现,比如设置了transform等,这些还没仔细研究)
定位元素与传统层叠上下文【[前端][CSS]用ps的方式理解层叠上下文】举个栗子:
对于包含有position:relative/position:absolute的定位元素,以及FireFox/IE浏览器(不包括Chrome等webkit内核浏览器)(目前,也就是2016年初是这样)下含有position:fixed声明的定位元素,当其z-index值不是auto的时候,会创建层叠上下文。
????666
这里父的z-index都是auto,都没有达成创建层叠上下文的条件。不过注意和ps相反的是,自然情况下,html里是后面的元素会在前面元素的上面。像这样。
![[前端][CSS]用ps的方式理解层叠上下文](https://img.it610.com/image/info10/f017bba69cca47b4a46a6365a3a17c08.png)
文章图片
Photoshop示意图
![[前端][CSS]用ps的方式理解层叠上下文](https://img.it610.com/image/info10/db04c553dd3b427d90a840320becf7d0.png)
文章图片
运行结果 如果在2-1,1-1里设置z-index,就等于按z-index来调整他们的顺序,越大放在越上面。
????666
![[前端][CSS]用ps的方式理解层叠上下文](https://img.it610.com/image/info10/454f1ae98b8f4982bf7678f511941599.png)
文章图片
Photoshop示意图
这里1-1的z-index大于2-1的z-index,所以就放在了上面
![[前端][CSS]用ps的方式理解层叠上下文](https://img.it610.com/image/info10/337e937963444d2399bbe70fceb8ad8c.png)
文章图片
显示结果 而当父达成了创建层叠上下文条件:
比如当id=1的div设置了z-index为具体值,就达成了创建层叠上下文条件。就等于放进了一个组里。
![[前端][CSS]用ps的方式理解层叠上下文](https://img.it610.com/image/info10/565f1fe46cd64c5d95e5633b660be172.png)
文章图片
ps
而id=2不改变,所以依然没有满足层叠上下文的条件。2-1是和group 1同层做比较的。
当1的z-index设置小于2-1,则2-1在上,group 1在下,group1的内容都在下。
![[前端][CSS]用ps的方式理解层叠上下文](https://img.it610.com/image/info10/91b76f8afe9942469827808b74d16548.png)
文章图片
ps
????666
![[前端][CSS]用ps的方式理解层叠上下文](https://img.it610.com/image/info10/fa05584e21ef4a3ca1c44e06bf0fba80.png)
文章图片
运行结果 在group 1内部的元素的z-index,只是在改变它在group1里的排序。类似这样。
![[前端][CSS]用ps的方式理解层叠上下文](https://img.it610.com/image/info10/32ca9e32d65f428c921ce67275497731.png)
文章图片
ps
所以即使group1里的元素z-index设置大于2-1的z-index,但是也没办法跳出它的父,覆盖到2-1上。
而同理,当group1的z-index比2-1大的时候,它就被放到上面去了。
![[前端][CSS]用ps的方式理解层叠上下文](https://img.it610.com/image/info10/082fc17fc6544580aed3477a7bda375f.png)
文章图片
ps
就算它的子的z-index再小,也不会跑出这组,跑到2-1下面去
????666
![[前端][CSS]用ps的方式理解层叠上下文](https://img.it610.com/image/info10/aa6b4117b585495e858afe9e88e2e3f5.png)
文章图片
显示 注意如果是这样:
????666 2-1-1
其实是等于2-1创建了层叠上下文,创建了个group
![[前端][CSS]用ps的方式理解层叠上下文](https://img.it610.com/image/info10/01e0879cd45c4aa69d4a8fc9ad9dcc43.png)
文章图片
ps 其他同理
如果把id=2的z-index等于5
就等于2创建了层叠上下文,类似这样
![[前端][CSS]用ps的方式理解层叠上下文](https://img.it610.com/image/info10/befaa0508fd74607b36fd73053ad6735.png)
文章图片
ps 我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1vpfff7b4qo0l
推荐阅读
- Docker应用:容器间通信与Mariadb数据库主从复制
- JS中的各种宽高度定义及其应用
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- 涉毒患者(新诗)
- 参保人员因患病来不及到指定的医疗机构就医,能否报销医疗费用()
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。