为<li>添加absolute类后图片消失，如何解决？

问题出在绝对定位元素脱离文档流导致父容器高度塌陷：
你给<li>加了absolute后，它会跳出正常文档流，作为父元素的<ul>因为没有非绝对定位的子元素支撑，高度直接变成0。虽然外层设置了relative（这是正确的定位上下文），但图片的h-full是相对于高度为0的父容器，自然就看不到了。

要保留absolute同时显示图片，核心是给<ul>设置明确的高度，或者用响应式的比例容器，下面是两种可行的修复方案：

方案1：给父容器设置固定高度 #

直接给<ul>添加固定高度类（比如h-[400px]），同时确保图片的宽高都撑满容器：

<link href="https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet">
<div class="relative m-12">
    <div class="flex justify-center">
        <div class="relative">
            <ul class="m-0 p-0 list-none h-[400px] relative">
                <li class="absolute top-0 inset-0">
                    <div>
                        <a href="#">
                            <img class="object-cover object-center w-full h-full block rounded-md"
                                src="https://i.imgur.com/tSxyAT4.jpeg" alt="altText" />
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

方案2：用比例容器实现响应式（推荐） #

如果需要适配不同屏幕尺寸，用padding-top配合相对定位来创建固定比例的容器（比如16:9比例对应pt-[56.25%]），再让图片绝对定位撑满容器：

<link href="https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet">
<div class="relative m-12">
    <div class="flex justify-center">
        <div class="relative">
            <ul class="m-0 p-0 list-none relative pt-[56.25%]">
                <li class="absolute top-0 inset-0">
                    <div>
                        <a href="#">
                            <img class="object-cover object-center w-full h-full block rounded-md"
                                src="https://i.imgur.com/tSxyAT4.jpeg" alt="altText" />
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

另外注意：轮播组件的所有轮播项都应该用absolute定位在同一个父容器内，所以父容器的高度必须明确，这样所有轮播项才能基于这个高度正确显示。

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