isolation: isolate未生效主因是浏览器兼容性不足（如safari 15.4前不支持）、未加-webkit前缀或作用于非块级/未定位元素；它仅在创建层叠上下文的容器上有效，且需配合position定位才能使z-index起作用。
为什么加了 isolation: isolate 还是被盖住？
不是属性写错了，是它根本没生效——isolation: isolate 在 Safari 15.4 之前完全不支持，Android WebView（尤其 6.x 及更早）连前缀都不认。DevTools 的 «Layers» 面板里看不到 “Stacking Context Root”，基本就能断定被浏览器静默忽略。
必须补前缀且顺序严格：-webkit-isolation: isolate 必须写在 isolation: isolate 前面，否则 Safari 15.4+ 会跳过前缀、旧版又看不到声明，两头落空。
-
isolation: isolate对display: inline或position: static元素无效，只作用于块级或已定位容器 - 别加在
<span></span>或<a></a>上，哪怕你写了display: block，也得确认 computed 值真生效了 - 加在隔了两层的祖先上（比如按钮外裹了两层
<div>），实际创建上下文的只有最内层那个容器 <h3> <code>z-index明明设了却不起作用，问题出在哪？z-index只在同一个层叠上下文中比较才有意义。父容器一旦触发了新上下文（比如加了opacity: 0.99、transform: translateZ(0)或filter: blur(0)），子元素的z-index就只能跟这个“小房间”内部比，再大也出不去。用 Chrome DevTools Elements 面板右键 → «Show stacking context»，看目标容器是否真成了根节点。如果不是，说明它被外层套住了。
- 优先删掉父级隐式触发属性；若无法删（如第三方轮播库强制加了
transform），就把isolation: isolate往上提一层，加在尚未被污染的最近祖先上 -
z-index必须配合position: relative/absolute/fixed才生效，static下设了等于没设 - 避免散落各处写魔法数字，统一用语义变量：
@z-modal: 900;、@z-dropdown: 500;，相邻值至少差 10，留插入余地
Less 中嵌套怎么避免放大层叠问题？
Less 嵌套不等于作用域隔离。
.card { .title { color: red; } }编译出来是.card .title，不是.card__title。一旦页面其他地方也有.title，照样被影响。漏掉
&是高频事故：写.card { > .content { } }少了个&，就会生成一条独立的> .content规则，全局匹配所有.content。- 要用 BEM 风格：
.card { &__title { color: red; } }→ 输出.card__title，物理级隔离 -
&:hover这类展开要谨慎——父类名一改，所有子状态全失效；只对明确属于该组件的交互才用 - 三层以上嵌套（如
.a { .b { .c { } } }）会生成.a .b .c，特异性过高，后期几乎无法局部覆盖
@import 顺序错位如何引发层叠异常？
Less 的
@import不是“加载”，是编译期内联拼接。顺序直接决定最终 CSS 规则位置，后导入的同权重规则自然覆盖前者。但错误常发生在细节上：比如把
@import "components/button.less";写在@import "base/reset.less";前面，结果按钮样式先出现、重置规则后压上去，按钮反而没了边框或内距。- 所有
@import必须集中写在主入口文件（如index.less）最顶部，按「重置 → 变量/mixin → 基础组件 → 业务组件 → 页面定制」分层 - 禁用组件文件内部再
@import——比如button.less里再@import "mixins.less"，依赖链失控，样式块可能插进不该在的位置 - 用
@import (reference)引入只提供变量和 mixin 的文件，避免重复输出 CSS 干扰顺序
- 优先删掉父级隐式触发属性；若无法删（如第三方轮播库强制加了
