isolation: isolate 主动创建无副作用的独立层叠上下文，需配合 position 和 z-index 使用，适用于弹窗、下拉菜单等需突破父级层叠限制的场景，但不提升元素层级，仅隔离 z-index 计算范围。
什么是 isolation: isolate 触发的层叠上下文
当多个元素都设置了 z-index，但层级关系不按预期生效时，大概率是因为它们没在同一个层叠上下文里——父容器可能无意中创建了新的上下文（比如用了 transform、opacity 或 filter），导致子元素的 z-index 只在局部生效。isolation: isolate 的作用就是「主动声明：我要在这里建一个独立的层叠上下文」，且不附带其他副作用（不像 opacity: 0.99 那样会触发重绘或影响可访问性）。
- 它不会改变元素自身渲染样式，只影响层叠顺序的计算范围
- 必须配合
position和z-index才能实际控制内部元素的堆叠 - 不能用于
display: inline元素，需是块级或定位元素
什么时候该用 isolation: isolate 而不是强行调 z-index
典型场景是弹窗、下拉菜单、Tooltip 等需要「穿透父级层叠限制」的组件。比如一个 position: fixed 的导航栏里嵌了下拉菜单，而导航栏父容器用了 transform: translateZ(0) —— 这会让整个导航栏变成一个新层叠上下文，其内部所有 z-index 都无法超过导航栏本身在页面中的层级。此时在下拉菜单的直接父容器上加 isolation: isolate，就能让菜单脱离导航栏的层叠约束，再用 z-index: 1000 就真正有效了。
- 父容器已有层叠上下文（如含
opacity、will-change、filter）且你无法修改它 - 你希望某个子区域完全独立于周围元素的
z-index计算逻辑 - 想避免用
transform: translateZ(0)或opacity: 0.999这类“黑魔法”触发上下文（它们有性能/语义代价）
isolation: isolate 和 z-index 的协作要点
isolation: isolate 本身不接受数值，也不直接控制层级高低；它只是“划地为界”，之后的 z-index 才在这个新边界内起作用。所以关键在于结构设计：
- 把
isolation: isolate加在需要隔离的「容器元素」上，不是加在要置顶的子元素上 - 该容器必须有
position值（relative/absolute/fixed），否则z-index无效 - 如果容器本身也需要参与外层堆叠（比如让它浮在其他模块之上），得额外给它设
z-index - 注意浏览器兼容性：
isolation在 IE 中完全不支持，Safari 从 9.1 开始支持，现代 Chrome/Firefox 没问题
示例：
立即学习“前端免费学习笔记（深入）”；
.dropdown-trigger {
position: relative;
isolation: isolate; /* ← 关键：创建独立上下文 */
z-index: 2; /* ← 让整个 dropdown-trigger 在外层有基础层级 */
}
<p>.dropdown-menu {
position: absolute;
top: 100%;
z-index: 1000; /<em> ← 这个 1000 只在 .dropdown-trigger 内部生效，但因上下文隔离，实际能突破父级限制 </em>/
}容易被忽略的坑：isolation 不会“提升”元素，只隔离计算范围
很多人以为加了 isolation: isolate 就能让子元素自动飞到最顶层——不是这样。z-index 仍受 CSS 层叠规则约束：比如一个 isolation: isolate 容器如果本身 z-index: 1，那它内部 z-index: 9999 的子元素，依然会被外层 z-index: 10 的兄弟元素盖住。真正起决定作用的，永远是「容器自身的 z-index 值」和「它所处的层叠上下文位置」。
- 检查父级是否已有
z-index且值过高，隔离只是帮你管好自己家，不是给你开外挂 - 用浏览器 DevTools 的 Layers 面板（Chrome）或 Paint Flashing（Firefox）确认层叠上下文是否真的被创建
- 若仍不生效，优先排查
position是否缺失、是否被contain: paint或overflow: hidden意外截断
复杂点在于：层叠上下文是嵌套的、隐式的、且不可见的。你得一边看结构树，一边查 computed style 里的 stacking context 标记，才能真正理清谁在管谁。
