使用absolute属性搭配relative时图片及父元素宽度为0的问题

问题原因 #

核心问题在于绝对定位元素会脱离文档流，无法撑开父容器。你的父div设置了relative但没有非绝对定位的内容或明确尺寸，且处于flex容器中，默认会被压缩到宽高为0。虽然图片本身指定了宽高，但父容器尺寸为0时，浏览器无法正确计算图片的布局参照空间，导致渲染异常。移除absolute后，图片回到正常文档流，撑开了父div的尺寸，因此能正常显示。

解决方案 #

提供两种可行的修复方式：

方案1：给父容器设置明确的宽高

直接给relative定位的父div设置和图片匹配的宽高，让父容器成为图片定位的有效参照：

<div class="flex h-20 w-full">
    <div class="relative mt-1 w-12 h-12">
        <!-- 调整图片偏移值，基于父容器定位 -->
        <img class="absolute left-0 top-2 h-12 w-12" src={Polygon} alt="" />
        <img class="absolute left-0 top-0 h-12 w-12" src={Polygon1} alt="" />
    </div>
</div>

方案2：阻止父容器被flex压缩，设置最小尺寸

如果不想固定父容器的宽高，可通过flex-shrink:0阻止flex容器压缩它，同时设置最小尺寸确保有足够布局空间：

<div class="flex h-20 w-full">
    <div class="relative mt-1 flex-shrink-0 min-w-[48px] min-h-[48px]">
        <img class="absolute left-4 top-4 h-12 w-12" src={Polygon} alt="" />
        <img class="absolute left-4 top-2 h-12 w-12" src={Polygon1} alt="" />
    </div>
</div>

关键说明 #

• 绝对定位元素的定位参照是最近的relative/absolute/fixed父元素，但父元素必须有可见尺寸（宽高不为0）才能让定位生效。
• 在flex布局中，子元素默认会根据可用空间收缩，因此需要主动设置flex-shrink:0或固定尺寸来保留父容器的布局空间。

内容的提问来源于stack exchange，提问作者Jensen Perry