本文介绍了Css层叠上下文的概念，指出层叠优先级不仅由z-index决定，还受到层叠上下文的影响。文章通过实例解析了z-index的复杂性和层叠顺序规则，并总结了层叠准则，强调了理解层叠上下文的重要性。
作为一个玩前端的，ps软件中的图层都知道吧，多个图层层叠就可以组成丰富多彩的图片，所以图层就有层叠顺序了，Css的层叠原理也是差不多，只不过Css是通过多个盒子层叠形成丰富多彩的图片，Css层叠优先级设置不就是z-index和!important吗？是的，就是这两招，这两个Css属性应该是见怪不怪，因为这是我们只要写Css样式都会用到，那么它们有什么区别？
- z-index：
一个元素在文档中的层叠顺序，用于确认元素在当前层叠上下文中的层叠级别。 - !important：
提升指定样式规则的应用优先权，也可以理解为增加样式权重的方法，只要给元素属性值后面带上这个就会使当前设置的样式有最高优先级。
!important这个相信不用我们多花时间去理解都知道，反正它就是最高优先级，但是z-index的优先级相信很多人都是停留在它的值越高优先级越高，这样理解也没错，比如以下例子：
- z-index越小反而层叠优先级越高，效果跟上图一致，为什么？
.parent1 {...z-index: 2;}.parent2 {...z-index: 1;}* 给设置了z-index属性的盒子都添加了定位属性，为什么大小又生效了？<img src=“https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd845fc599d2479eb8f9ae310d7a1e9e~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)*z-index大小对于元素的样式层叠优先级完全没有顺序可言，为什么会这样？<!DOCTYPE html><html lang="en"><head><style> .pa
最低0.47元/天 解锁文章
1435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
