isolation: isolate 唯一作用是强制创建无副作用的新层叠上下文，不直接控制混合或层级；它通过划定边界使 mix-blend-mode 和 z-index 仅在内部生效，需配合 position 和 z-index 使用，且对 inline 元素无效。
isolation: isolate 本身不隔离混合，它只创建层叠上下文
很多人以为 isolation: isolate 是专为 mix-blend-mode 设计的“混合开关”，其实不是。它唯一的作用是**强制创建一个新的层叠上下文**——而混合模式的“隔离效果”，只是这个新上下文附带的副作用：因为混合只发生在同一层叠上下文内，上下文边界天然阻断了跨上下文的混合。
换句话说：isolation: isolate 不认识 mix-blend-mode，但它划了一条线，让混合只能在线内发生。
为什么加了 isolation: isolate 后 mix-blend-mode 看起来“被隔离”了
默认情况下，mix-blend-mode 会和它下方所有层叠顺序更低的元素混合（包括父背景、兄弟元素、甚至 body 背景）。一旦你给某个容器设了 isolation: isolate，它就成了一个独立的层叠上下文根节点，它的子元素混合时，只跟它内部的后代比，不再穿透到外部。
-
.container { isolation: isolate; }→ 容器自身成为新上下文根 -
.container > .blend { mix-blend-mode: multiply; }→ 这个元素只跟.container内部其他同级或更底层的子元素混合 - 外部的
body背景、隔壁.sidebar元素，统统被挡在线外
常见踩坑点：加了 isolation 却没生效
最常忽略的是：这个属性对 display: inline 元素无效；且必须配合定位才能让 z-index 和混合行为按预期工作。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 确保目标容器不是
inline或inline-block（需是block、flex、grid或已定位元素） - 如果容器本身需要参与外层堆叠（比如要浮在导航栏之上），必须额外加
position: relative和z-index - Safari 14 及更早版本不支持原生
isolation: isolate，得补前缀：-webkit-isolation: isolate - 别写成
isolation: on或isolation: true—— 只有isolate是有效值
替代方案对比：什么时候该用 isolation 而不是 opacity/transform
老办法如 opacity: 0.99 或 transform: translateZ(0) 也能创建层叠上下文，但代价明显：
-
opacity: 0.99会轻微变透明，影响可访问性，且子元素继承 opacity 值 -
transform: translateZ(0)强制 GPU 合成，可能引发字体发虚、滚动卡顿，Safari 中还容易和will-change冲突 -
isolation: isolate零视觉副作用、零性能扰动，语义清晰，就是干“划界”这一件事
真正复杂的地方在于：它不提升层级，只定义范围。你得同时管好“容器自己在哪一层”和“容器里面谁在上面”，这两层 z-index 是解耦的，容易漏掉其中一层。
