移动端浮层在CSS响应式设计中，如何有效管理Z-index层级？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1160个文字，预计阅读时间需要5分钟。
移动端浮动元素+z-index+看似设置了，但压不住其他元素，八成是被父级创建的+stacking context+截断了。
CSS的层叠顺序不是全局flat的，而是按+stacking context+分层嵌套的——子元素的+z-index+只在其最近的stacking context父容器内生效。
常见触发 stacking context 的属性：position: relative/absolute/fixed + z-index（非 auto）、opacity 小于 1、transform 非 none、filter、will-change 等。尤其注意：iOS Safari 对 transform: translateZ(0) 也敏感，可能意外创建新层叠上下文。
本文共计1160个文字，预计阅读时间需要5分钟。
移动端浮动元素+z-index+看似设置了，但压不住其他元素，八成是被父级创建的+stacking context+截断了。
CSS的层叠顺序不是全局flat的，而是按+stacking context+分层嵌套的——子元素的+z-index+只在其最近的stacking context父容器内生效。
常见触发 stacking context 的属性：position: relative/absolute/fixed + z-index（非 auto）、opacity 小于 1、transform 非 none、filter、will-change 等。尤其注意：iOS Safari 对 transform: translateZ(0) 也敏感，可能意外创建新层叠上下文。