定义
然而，在使用中往往会发现，有的元素明明是z-index：999999，但是仍然会被一些z-index：1的元素覆盖，why？
按照我个人理解，原因是z-index有其作用域，因此数值大的不一定在前面，它只会和同作用域的元素比较。下面具体分析一下（而不是用我造的词）。
stacking contexts
stacking contexts是元素的上下文。当我们给元素一个z-index，那么这个值只会和在相同 context下的其他元素竞争，如果是更高的竞争则交给其context进行比较。
css的设计和ps其实有点像，z-index是元素的层级，stacking contexts是元素所在的组。层级只在当前组下生效。
创建上下文的方法
如果啥样式都没写（html标签自动创建一个上下文），那么整个html页面只有一个上下文，z-index也就全局生效了。但是很多情况下，我们需要创建新的上下文来避免元素突破容器，或者会无意中创建了上下文导致元素的z-index无效。所以了解上下文创建方法就很有必要了，常见方法如下：
- 设置了transform，filter，perspective，clip-path，mask / mask-image / mask-border等样式属性
- 透明度设置为小于1的值
- position为absolute/relative并设置了z-index，或position为sticky/fixed
- 父容器为flex或者grid，且自身设置了z-index
- 设置isolation: isolation属性（常用于上下文封装）
更多的直接看文档吧：developer.mozilla.org/en-US/docs/…
排查工具
推荐一款chrome插件：CSS Stacking Context inspector
优点：用起来足够简单明了，而且可以告诉选择元素上下文创建的原因及跳转到代码
缺点：功能并不是很强大，只能起到辅助作用
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！