Why image disappears when I add "absolute" in class property?

user_10513769 0
Viewed 65

Problem

I am making a basic image carousel with Tailwind; I have been stuck with this problem where I as soon as I add absolute on<li> tag, the image disappears.

Added "relative" on outer tag as I saw some solutions mentioning it, but it didn't stop the image disappearing.

How can I make the image stop disappearing on browser when I still use the absolute property ?

Code

Here is my html code.

<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 flex flex-row list-none">
                <li class="absolute top-0 inset-0">
                    <div>
                        <a href="#">
                            <img class="object-cover object-center h-full block rounded-md"
                                src="https://i.imgur.com/tSxyAT4.jpeg" alt="altText" />
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
tailwind-css css html
2 Answers

Because of this line - <div class="flex justify-center">

div element within is "squished" and have no size (0px because inner elements absolutely positioned and have "no space", while flex layout is not allowing to stretch full width)

The element is removed from the normal document flow, and no space is created for the element in the page layout - link

To fix it you may add w-full to inner div like

<div class="relative m-12">
    <div class="flex justify-center">
    
        <!-- here -->
        <div class="relative w-full">
            ...
        </div>
    </div>
</div>

But I personally see no reason in such layout (center the only element which is stretched to full width anyway) so desired result may correct my answer

user_143050760

Give absolute position to div instead.

<script src="https://cdn.tailwindcss.com"></script>
<div class="relative m-12">
    <div class="flex justify-center">
        <div class="absolute">
            <ul class="m-0 p-0 flex flex-row list-none">
                <li class="top-0 inset-0">
                    <div>
                        <a href="#">
                            <img class="object-cover object-center h-full block rounded-md"
                                src="https://i.imgur.com/tSxyAT4.jpeg" alt="altText" />
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

user_109623640
Related