FIMO导出HTML时图层被扁平化为静态PNG，无法通过CSS或DOM还原原始叠放关系；需改用json+png模式导出并手动解析fimo.json重建图层DOM结构。
FIMO 输出 HTML 时默认不保留原始图层顺序，图层会被扁平化为静态 PNG 像素，无法通过 CSS z-index 或 DOM 层级还原原始叠放关系。
为什么 FIMO 导出的 HTML 看似有“图层”但实际不可控
FIMO 的 HTML 导出本质是将当前时间点的合成结果（含所有可见图层、遮罩、变换）渲染为单张 <img alt="FIMO输出HTML会保留图层顺序吗_FIMO输出HTML图层排序数据【解析】" > 标签或 Canvas 帧。即使你看到多个 <div> 容器，它们只是用于响应式布局或动画分段，<strong>不是原始 AE 图层的映射</strong>。
<ul>
<li>导出设置中勾选 <code>Preserve layer hierarchy（如果存在）仅影响 JSON 数据结构，不影响 HTML 渲染输出
Track Matte、Blending Mode、3D Layer 在 HTML 中均被预合成，不可动态开关HTML + JS 模式导出，图层信息会写入 fimo.json，但需自行用 JS 解析并重建 DOM —— FIMO 不自动生成可交互的图层控制逻辑想让 HTML 里能控制图层显隐/顺序？得自己补逻辑
如果你依赖图层独立控制（比如点击切换某元素显示、拖拽调整叠放），必须在导出后手动改造：
- 用 FIMO 导出
JSON + PNG 序列（而非纯 HTML），确保启用includeLayerInfo: true配置 - 读取生成的
fimo.json，遍历layers数组，按index或parentID还原层级树 - 为每个图层创建独立
<div class="fimo-layer" data-layer-id="2"><img src="layer_2_0001.png" alt="FIMO输出HTML会保留图层顺序吗_FIMO输出HTML图层排序数据【解析】" ></div>，用z-index模拟原始layer index - 注意：AE 中图层的
index是从 1 开始的整数，但 JSON 里可能被重映射；inPoint/outPoint决定该图层在时间轴上的活跃区间，需配合 JS 动画库（如 GSAP）做条件显隐
FIMO 的 exportSettings.json 里哪些字段影响图层输出
关键配置项直接决定你能否拿到可用的图层元数据：
立即学习“前端免费学习笔记（深入）”；
-
exportMode: "json+png"—— 必须设为此值，"html"模式会丢弃图层结构 -
includeLayerInfo: true—— 否则fimo.json中无layers字段 -
flattenLayers: false—— 即使设为false，HTML 渲染器仍会合成；此参数只影响 JSON 是否保留子图层引用 -
useBase64: false—— 设为false才能拿到独立 PNG 文件，方便按图层名加载（如layer_name_0001.png）
真正保留图层顺序这件事，不在 FIMO 的 HTML 输出职责范围内。它输出的是“快照”，不是“编辑器”。要实现动态图层控制，得把 FIMO 当作资源生成器，而不是运行时引擎 —— 这个边界不厘清，后续所有 DOM 操作都会踩空。
