图层重叠不直接耗电，但会因触发多余合成层、强制CPU渲染或GPU带宽占用而间接增加功耗；优化核心是控制合成行为而非减少重叠，需用Layers面板验证实际分层，避免隐式层叠上下文，并合并共享动效的元素、用overflow:clip替代hidden。
图层重叠本身不直接耗电，但会间接引发高功耗——根源在于浏览器为处理重叠关系而被迫创建过多合成层、频繁触发合成操作，或强制降级到 CPU 渲染。尤其在移动设备上，GPU 内存带宽受限、功耗敏感，不合理分层会显著抬升能耗。优化关键不是“减少重叠”，而是“控制重叠所触发的合成行为”。
识别重叠是否真正触发了新合成层
很多开发者误以为 z-index 不同就等于分层，其实不然。只有满足特定条件的重叠才会促使浏览器创建独立合成层。需用 Chrome DevTools 的 Layers 面板（More Tools → Layers）实际验证：
- 打开页面，滚动/动画触发后点击 Layers 面板，观察重叠区域是否各自出现在不同图层中；
- 若两个元素都未设置 will-change、transformZ 或 filter，即使 z-index 相差很大，也可能共用同一层——此时无额外功耗；
- 若重叠元素之一设置了
filter: blur()或mix-blend-mode: multiply，它大概率被单独提升，且该层渲染开销极高（尤其 iOS WebKit 对 blur 极不友好）。
避免因隐式层叠上下文导致的意外分层
某些 CSS 属性会在不自知的情况下创建新的层叠上下文，进而诱发浏览器保守策略：为防绘制顺序错乱，给相邻重叠元素分别建层。常见诱因包括：
-
opacity: 0.99（非 1）、transform: scale(0.99)（非恒等变换）； -
will-change: opacity却未真正动画，只是静态声明； - 父容器有
contain: layout paint，但子元素又与外部元素重叠，打破 containment 边界。
这类分层既无性能收益，又增加 GPU 纹理内存占用和每帧合成负担，直接推高功耗。建议只在明确需要动画时才启用相关属性，并动画结束后及时移除 will-change。
合并可共享视觉状态的重叠元素
当多个 UI 元素（如弹窗蒙层 + 按钮浮层 + 提示气泡）在逻辑上始终一起出现、一起动效，应主动让它们归属同一合成层，而非任由浏览器为每个 z-index 创建一层：
- 用一个包裹容器统一设置
transform: translateZ(0)或will-change: transform； - 内部所有子元素使用
position: absolute定位，避免脱离文档流引发布局扰动； - 禁用子元素自身的分层触发器（如删掉各按钮上的
will-change: opacity）。
这样既保持视觉层级，又将合成压力集中到单层，减少 GPU 多图层混合次数和内存拷贝量。
用 overflow: clip 替代 hidden 来规避合成层膨胀
当重叠区域需裁剪（例如卡片溢出阴影被截断），传统写法 overflow: hidden 在部分浏览器（尤其是 Safari 和旧版 Chrome）中会强制创建合成层。而 overflow: clip 是现代标准替代方案：
- 语义相同：裁剪内容但不创建层叠上下文；
- 不触发新合成层，避免因裁剪需求连带提升父容器层级；
- 兼容性已覆盖所有主流移动端浏览器（Chrome ≥94, Safari ≥15.4, Firefox ≥90）。
对长列表、瀑布流等高频滚动场景，批量替换可明显降低合成线程负载与功耗。
