isolation: isolate 是主动声明层叠上下文边界的属性，仅使容器成为新层叠根节点，不提升层级或修复 z-index；需作用于已定位或块级直接父容器，且须配合 position 和 z-index 才生效。
isolation: isolate 不是 z-index 救命稻草，而是上下文边界的主动声明
它不提升元素层级，也不修复 z-index 数值，只做一件事：让某个容器成为层叠上下文的根节点。一旦生效，其内部所有 z-index 比较就只在该容器内进行，不再和外部元素“抢位置”。常见失效不是属性没起作用，而是你误以为加了它，子元素就能自动浮起来——其实整个容器本身还在默认层叠层（z-index: auto），压根没资格参与外层排序。
必须加在直接父容器上，且该容器得是块级或已定位元素
给按钮自己加 isolation: isolate？浏览器直接忽略。它只对 display: block、flex、grid 或带 position: relative/absolute/fixed 的容器生效。
- 错误：
.tooltip-content { isolation: isolate; }—— 如果 tooltip 内容实际嵌套在.tooltip-wrapper > .tooltip-inner > .tooltip-content里，那就隔了两层 - 正确：
.tooltip-wrapper { position: relative; isolation: isolate; z-index: 100; }，前提是.tooltip-wrapper是.tooltip-content的直接父级 - 别加在
或全局 layout wrapper 上——等于把整页锁进一个上下文，反而让弹窗、下拉菜单彻底失去对外层的穿透能力
加了 isolation: isolate 却还是被盖住？先查这三件事
不是属性失效，而是配套条件没凑齐：
- 容器自身有没有
position值？static下z-index无效，isolation也白搭 - 容器有没有
z-index？哪怕只是z-index: 1，也比auto更有话语权；否则整个隔离块卡在最底层 - 祖先元素是否已用
opacity: 0.99、transform: translateZ(0)或filter: blur(0)创建了隐式上下文？这时再加isolation: isolate，可能只是把新上下文嵌套进旧的里面，范围反而更大
mix-blend-mode 混错背景？isolation 是边界，不是开关
mix-blend-mode 默认会向下穿透整个层叠上下文——从目标元素一路混到 背景。加 isolation: isolate 后，混合行为被限制在容器内部，仅与同级或更底层的子元素发生，<header></header>、<footer></footer>、甚至兄弟 <aside></aside> 全部被挡在外面。
- 关键点：它不改变
mix-blend-mode的计算逻辑，只划定作用域 - 移动端尤其依赖它：iOS Safari 对
position: fixed元素自动建上下文，没隔离时弹窗里的混合常和页面底部 footer 错乱叠加 - 别写成
isolation: true或isolation: on——只有isolate是合法值
isolation: isolate 和 z-index 是解耦的两层控制——你要同时管好“容器自己在哪一层”，以及“容器里面谁在上面”。漏掉其中一层，问题就还在。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
