css的层叠上下文
前段时间,公司开始推进低代码平台业务,我有幸的参与其中。在这期间牵扯到了css的层叠上下文,并给我带来了一定的困扰,为了更好的实现业务逻辑,我觉得好好的深入研究一下css的层叠上下文。想必大家都知道网页是二维空间的,但是内容却是三维的,除了比较直观的x、y之外,还存在一个不是很直观的z轴。
层叠上下文元素
我们日常开发过程中,比较经常使用的涉及层叠上下文的属性主要有几种:
-
position: absolute | fixed | relative | sticky
-
z-index
-
float: left | right
-
transform
层叠等级比较
在不牵扯到祖孙嵌套的前提下,简单的层级对比:
z-index: -1 < 普通元素 < float < position < transform < z-index > 0
在牵扯到祖先元素已经产生了层叠上下文的时候,那是后代元素的层叠等级会受到祖先元素的影响。
实战问题
在可视化实现的过程中,碰到了一个问题:在嵌套层级的拖拽的过程,由于嵌套的父元素上已经存在了层级问题,导致祖孙元素受到祖先元素的影响,拖拽的时候会出现被“正常文档流”的元素所覆盖的情况。经过一段时间的研究,产生该问题的原因就是受不同层叠上下文的影响导致的。
实战
1. 同层级的层叠上下文比较
由于代码量太多,这里就不浪费篇幅进行展示了,直接上我运行的结果。通过下面的图片,我们可以对上文提到的同层级的层级比较做出印证。
2. 不同position的层叠上下文比较
对于position来说,在不使用z-index的情况下,兄元素的层叠上下文大于弟元素的层叠上下文。用人话说,就是后面的元素的层叠上下文高于前面的元素。
.fixed {
position: fixed;
top: 0;
left: 0;
background: red;
}
.relative {
position: relative;
top: 20px;
left: 20px;
background: green;
}
.absolute {
position: absolute;
top: 60px;
left: 60px;
background: yellow;
}
.sticky {
position: sticky;
top: 60px;
left: 90px;
background: pink;
}
3. 不同层叠上下文中的层叠等级比较
首先我们先复现一下上面提到实战问题,不同层叠上下文里面的层叠等级实现。
红色块和绿色块是两个同级元素,其中红色的层叠等级高于绿色的层叠等级,导致红色块中的两个元素即使层叠等级低于橙色的块元素,但是实际效果是,橙色的层叠等级低于另外的块元素。
.purple {
top: 20px;
left: 20px;
background: purple;
z-index: 10;
}
.pink {
top: 60px;
left: 60px;
background: pink;
z-index: 20;
}
.orange {
top: 10px;
left: 10px;
background: orange;
z-index: 999;
}
这里,提一下我对于上面的问题的解决办法,就是动态修改祖先元素的层叠等级。不过,我个人觉得这个方式有待研究,对于嵌套层级较多的时候,比较笨重。如果有小伙伴有更好的方式的话,欢迎在下面留言。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfggif
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01