加了isolation: isolate子元素仍被盖住，根本原因是该属性仅创建新层叠上下文，不提升容器自身在外部的层级；必须同时设置position和z-index才能使其“露头”。
为什么加了 isolation: isolate 子元素还是被盖住
根本不是属性失效，而是它只创建新层叠上下文，不抬高容器自身在外部的层级位置。如果容器是 position: static 或 z-index: auto，它在父级中默认处于第 0 层——内部再高的 z-index 也出不去。
- 必须给容器加
position: relative（或absolute/fixed） - 必须显式设
z-index（比如z-index: 100），不能依赖默认值 - 用 Chrome DevTools 的 «Layers» 面板确认该节点是否显示为 “Stacking Context Root”
- 检查祖先是否有
opacity: 0.99、transform: scale(1)或filter: blur(0)——这些会提前建上下文，把你的隔离容器包进“套娃”里
isolation: isolate 应该加在谁身上
它只对块级或已定位的直接父容器生效，且必须是目标元素的最近共同父级。加错地方等于白加。
- 错误：给弹窗内容本身（如
.modal-body）或按钮（.btn）加 —— 它们不是容器，浏览器直接忽略 - 错误：加在
body或全局 wrapper 上 —— 范围太大，整个页面变成一个“大结界”，反而加剧冲突 - 正确：找到包裹交互区域的容器，比如
.carousel-nav、.editor-content、.modal-header - 结构是
<div class="wrapper"><div class="btn-group"><button></button></div></div>？那就加在.btn-group上，不是.wrapper
响应式中 isolation 和 transform/opacity 冲突怎么解
媒体查询里切 transform: translateX(0) 或 opacity: 0.99 是常见诱因，它们会隐式创建层叠上下文，让 isolation: isolate 失效或变无效。
- 别和
opacity 、<code>transform != none、filter共存于同一父级 —— 它们优先级更高，会覆盖isolation的边界意图 - 若无法删掉上层
transform，就把isolation: isolate加在更外一层、尚未被污染的容器上 - 旧项目里用
transform: translateZ(0)升层？换成isolation: isolate更干净：零字体模糊、零滚动卡顿、不触发 GPU 合成 - 移动端 Safari 中尤其明显：iOS 15.4 之前必须写
-webkit-isolation: isolate，且要放在isolation: isolate前面
isolation 对 mix-blend-mode 的影响为什么看起来像“失效”
它不是禁用混合，而是把容器变成混合计算的终点。加了之后，子元素只跟同级兄弟混合，不再和 body 背景、导航栏、侧边栏混合 —— 这是预期行为，不是 bug。
- 文字原本压图变暗，加
isolation: isolate后恢复原色？说明它不再跟图片混合，只跟容器内其他子元素混合 - DevTools 里
mix-blend-mode的 computed 值仍是multiply，但视觉没变化 —— 正常 - 要恢复跨容器混合，得把目标元素和想混合的对象拉回同一个层叠上下文（比如去掉父级
isolation，或把两者都放进同一隔离容器） -
isolation: isolate对display: inline元素完全无效，浏览器静默忽略
真正容易被忽略的点是：isolation: isolate 划了边界，但这个“边界”的高度，由它自身的 position 和 z-index 决定 —— 不是加了就万事大吉，而是得先让它在外层堆叠顺序里“露头”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
