当父容器使用 flex 布局，且子元素仅包含 position: absolute 的图片时，该子容器会因无流式内容而塌陷为宽度 0，导致图像不可见——根本原因在于绝对定位元素脱离文档流，Flex 无法为其分配空间。
当父容器使用 `flex` 布局，且子元素仅包含 `position: absolute` 的图片时，该子容器会因无流式内容而塌陷为宽度 0，导致图像不可见——根本原因在于绝对定位元素脱离文档流，flex 无法为其分配空间。
在 Tailwind CSS（或标准 CSS）中，flex 容器默认采用“收缩适应”（shrink-to-fit）行为：它会尽可能压缩其非绝对定位的子元素的尺寸。而一旦子容器（如 <div class="relative mt-1">）内部所有子元素均设为 <code>position: absolute，它们便完全脱离文档流——此时该子容器既无文本内容、无块级流式子元素，也未显式设置宽高，浏览器会将其计算为 width: 0 和 height: 0，即使它拥有 relative 定位。
结果是：虽然 <img> 元素本身设置了 w-12 h-12，但由于其父容器宽度为 0，且 absolute 定位依赖于最近的 relative 祖先作为定位上下文，而该祖先“不可见”，视觉上图像常表现为偏移异常或彻底不可见（尤其在 SVG 内联导入等对容器尺寸敏感的场景中更明显）。
✅ 正确解法：为 relative 定位的容器显式指定尺寸
无需改动图片的 absolute 样式，只需确保其直接父容器（即 relative 元素）具有明确的宽高：
<div class="flex h-20 w-full">
<!-- ✅ 添加 w-40 或其他合适宽度（如 w-16、min-w-[64px]） -->
<div class="relative mt-1 w-40">
@@##@@
@@##@@
</div>
</div>
? 补充建议：
- 若需响应式适配，可用
w-40 sm:w-48 md:w-56等断点类； - 若图标位置需严格对齐，可考虑用
inset-0+m-auto替代left/top手动偏移； - 避免对
absolute图片父容器使用flex或grid（除非同时设置width），因其与绝对定位语义存在天然冲突； - 对 SVG 内联资源（如 React 中的
import Polygon from './polygon.svg'），确保其本身无固有viewBox或width/height冲突——但本问题主因仍是父容器塌陷，而非 SVG 源问题。
总结：Flex 容器中的 relative 子容器不是“自动撑开”的魔法盒子；它是布局锚点，必须被赋予明确尺寸才能承载 absolute 子元素。显式声明 width（或 min-width、flex-basis）是最直接、最可靠的修复方式。
