原生组件因脱离文档层叠上下文导致z-index失效，需用isolation: isolate隔离混合边界，并通过@scope精准控制样式作用域，调试时应优先使用devtools的layers面板确认渲染层级。
原生组件（如 iOS 的 <details></details>、WebView 中的 <input type="date"> 或系统级弹窗）在混合开发中常因层级失控导致遮挡、混合异常或交互失效——根本原因不是样式写得不对，而是没主动参与层叠上下文的创建与隔离。
为什么 z-index 对原生组件经常无效
原生组件（尤其是 iOS Safari 中的表单控件、<select></select>、<input type="file">）默认处于独立的渲染层，不响应父容器的 z-index。即使你给包裹它的 <div> 加了 <code>position: relative 和 z-index: 9999，它仍可能被系统 UI 盖住。
- iOS Safari 会为
fixed元素、transform元素、opacity 元素自动创建新层叠上下文，导致你的 <code>z-index被“截断”在子树内 - WebView 中的原生控件（如 Android 的软键盘弹出时的输入框）根本不属于当前文档的层叠顺序体系，CSS 层级规则对其无约束力
-
<details></details>展开后的内容虽是 DOM，但其<summary></summary>在某些版本 Safari 中会触发隐式合成层，使相邻元素的z-index失效
用 isolation: isolate 锁定混合边界
当原生组件周围有 mix-blend-mode、backdrop-filter 或半透明遮罩时，最容易出现“背景污染”：混合效果穿透到系统状态栏、导航栏甚至桌面壁纸。这时 isolation: isolate 不是可选项，而是必选项。
- 必须加在直接包裹原生组件的容器上，例如：
.form-field { -webkit-isolation: isolate; isolation: isolate; position: relative; } - 不能加在原生组件自身（
<input>是 inline 元素，isolation对它无效） - 若该容器还需浮在 modal 之上，必须额外配
z-index和position: relative，否则隔离块本身会被压在底层 - 检查是否生效：打开 Chrome 或 Safari DevTools 的 «Layers» 面板，确认该容器是否显示为 “Stacking Context Root”
用 @scope 控制原生组件的样式作用域
原生组件（如 <details></details>）自带默认样式，且不同浏览器差异大。想统一外观又不想全局污染？@scope 是目前最干净的方案——它让 CSS 规则只作用于特定 DOM 子树，连伪元素（::marker、::-webkit-inner-spin-button）都能精准命中。
- 写法示例：
@scope (.ios-menu) { details > summary::marker { display: none; } details[open] > summary { padding-left: 24px; } } - 注意：
@scope必须配合有效的范围选择器（如类名），不能只写@scope { ... } - 当前仅 Chromium 120+ 和 Safari 17.4+ 原生支持；旧版需用
:has()+ 类名模拟，但无法控制伪元素 - 别试图用
!important覆盖原生样式——它在@scope内部优先级不变，且破坏可维护性
真正棘手的从来不是怎么写样式，而是判断某个原生组件到底属于哪个渲染层：是文档层、合成层、还是系统 UI 层。一旦误判，所有 z-index、isolation、@scope 都只是在修修补补。动手前先用 DevTools 的 «Layers» 面板点开看一眼，比查十遍文档都管用。
