Figma自动布局子元素重叠的主因是绝对定位干扰、约束禁用、嵌套非布局Frame、CSS导出错误或填充容器冲突；需依次检查约束设置、启用嵌套Frame自动布局、切换导出定位模式、调整填充与间距参数。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在Figma中启用自动布局后发现子元素出现异常重叠，很可能是由于图层意外应用了CSS-like的绝对定位逻辑（如手动设置坐标锁定、禁用约束或导出时混入position: absolute样式），而自动布局本身依赖相对位置与弹性间距机制。以下是排查与修复该问题的具体步骤：
一、检查图层是否被错误设为“固定位置”或禁用约束
Figma自动布局要求所有子图层保持“自由响应”状态；若某个图层被手动拖拽脱离布局轨道、或在约束面板中关闭了水平/垂直约束，它将失去自动对齐能力，表现为悬浮、偏移甚至视觉重叠。
1、选中疑似重叠的图层，在右侧属性面板中查看「Constraints」（约束）区域。
2、确认「Horizontal」和「Vertical」下拉菜单均未设为「Fixed」；若显示为「Fixed」，请分别改为「Left & Right」或「Top & Bottom」等响应式选项。
3、检查该图层是否被单独移动过：右键图层，查看上下文菜单中是否出现「Reset Position」选项；若存在，点击重置以回归自动布局轨道。
二、验证自动布局容器内是否存在嵌套非布局Frame
当自动布局容器中嵌套了一个未启用自动布局的普通Frame（即仅作为分组使用），该内部Frame会作为整体参与外层布局计算，但其内部子图层不受外层间距与对齐规则约束，极易造成内部元素挤压重叠。
1、逐层展开疑似问题区域的图层结构，识别所有带「Frame」图标的容器。
2、对每个嵌套Frame单独选中，观察右侧属性面板顶部是否显示「Auto Layout」开关已启用；若未启用，且该Frame内含多个子图层，则需为其单独添加自动布局。
3、对已启用自动布局的嵌套Frame，检查其「Direction」（方向）是否与外层一致；若外层为垂直而内层为水平，可能因尺寸计算冲突导致内容溢出并视觉重叠。
三、排查导出插件或CSS映射工具引入的position: absolute干扰
部分Figma-to-HTML导出插件（如Anima、Zeplin或自定义脚本）在生成代码时，会将图层坐标强行转译为CSS中的position: absolute + top/left值；若父容器未同步设置position: relative，或未重置z-index层级，将直接导致浏览器渲染时多个元素锚定到同一视口坐标，形成强制重叠。
1、回顾最近使用的导出插件名称及版本，查阅其文档是否提及“absolute定位模式”或“禁用Flex/Flexbox输出”选项。
2、在导出设置中查找「Positioning Method」或「Layout Output」相关字段，将其明确切换为“relative + margin/padding”或“Flexbox”模式，避免生成absolute定位代码。
3、若已生成含absolute的CSS文件，搜索所有出现position: absolute的规则，为每个对应父容器补上position: relative，并为重叠元素逐一添加唯一z-index值（如z-index: 1; z-index: 2;）。
四、审查自动布局的“填充容器”与“项目间距”冲突
当多个子图层同时启用“Fill Container”（填充容器）且方向为水平时，它们会争夺同一行内的全部可用宽度；若容器总宽不足或子图层最小尺寸超限，Figma将无法合理分配空间，触发压缩或错位，呈现重叠假象。
1、选中自动布局容器，在属性面板中查看「Layout Mode」是否为「Fill Container」；若是，暂将其改为「Hug Contents」以观察重叠是否消失。
2、检查各子图层的宽度设置：若某文本图层启用了「Fill Container」，而相邻图标图层设置了固定宽度（如24px），则需确保二者之间设置了足够「Spacing」（项目间距），建议最小间距不小于8px，且避免将Spacing设为0。
3、在工作区中拖拽调整两个相邻图层间的蓝色间距条，观察重叠是否随间距增大而解除；若解除，说明原始间距值过小或被设为负值。
