z-index在ie6/7和旧chrome中“写了等于没写”，根本原因是层叠上下文未正确创建或被意外截断：ie6/7要求子元素z-index生效时其直接父级必须为已定位元素（position: relative/absolute/fixed），static父级会彻底忽略子级z-index；chrome 56及更早版本对transform、opacity: 0.99等属性敏感，任一祖先触发即创建隔离上下文，锁死子元素z-index作用域。
低版本浏览器（Chrome 56 及更早、IE6–IE11、Android 4.4 WebView 等）中 CSS 定位失效或错乱，核心问题不是写法错，而是层叠上下文、定位锚点、属性支持度三者共同失控。单靠改 z-index 或加 !important 基本无效。
为什么 z-index 在 IE6/7 和旧 Chrome 里“写了等于没写”
根本原因是层叠上下文没被正确创建或意外截断：
- IE6/7 要求子元素的
z-index生效，其**直接父级**必须是已定位元素（position: relative/absolute/fixed），static父级会彻底忽略子级z-index - Chrome 56 及更早版本对
transform、opacity: 0.99、will-change极其敏感——只要某个祖先用了这些，就会强制创建隔离的层叠上下文，把子元素的z-index锁死在局部，无法和兄弟容器比高低 - 用 DevTools 的 “Computed” 面板检查目标元素，若标有 “Stacking Context”，说明它已被某个祖先截断，此时再调高数值毫无意义
如何安全修复 fixed / absolute 定位在旧安卓和 iOS 上的位移
键盘弹出时 position: fixed 错位，不是 bug 是设计限制：它锚定的是视觉视口（visual viewport），而软键盘会压缩或冻结该视口，但 fixed 元素不重算位置。
- 最可靠解法是换用
position: absolute，但必须同步满足三个条件：body或根容器设position: relative+min-height: 100vh；底部元素加width: 100%；监听focusin/blur动态设置bottom值 -
@supports (bottom: env(keyboard-inset-bottom))仅限 iOS Safari 16.4+，安卓完全不支持，不能单独依赖 - 避免用
resize事件监听键盘——iOS 触发率低于 20%，安卓延迟严重且无法捕获弹起瞬间
怎么让旧浏览器识别 grid / flex 并降级不崩
别指望 Autoprefixer 自动兜底，旧内核根本不认新语法，必须手动降级并严格控制检测逻辑：
- IE11 不解析
display: grid，必须写display: -ms-grid（放在display: grid前），且子项需手动写-ms-grid-column、-ms-grid-row，fr单位慎用，优先auto或固定值 -
@supports (display: grid)太宽松，Safari 10.1 会进分支但不支持gap或fr，必须双条件：@supports (display: grid) and (grid-template-columns: 1fr) - Android 4.4 WebView 根本不识别
@supports，需 JS 双保险：UA 字符串匹配 + 创建临时元素实测getComputedStyle(div).display === 'grid'，成功后给加no-grid类启用降级样式 - Flex 降级到
display: -webkit-box时，顺序必须是：display: -webkit-box在前，display: flex在后；子项用-webkit-box-flex: 1，不是flex: 1
真正麻烦的从来不是加一行 position: relative 或补一个前缀，而是得顺着 DOM 一层层往上翻，确认哪一环悄悄断掉了层叠上下文，或者哪个祖先偷偷触发了隔离的 stacking context——这种问题没有通用开关，只有手动验证路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
