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

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
    >
    <div >
        <div >
            <ul >
                <li >
                    <div>
                        <a href="#">
                            <img 
                                src="https://i.imgur.com/tSxyAT4.jpeg" alt="altText" />
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

CodePudding user response：

Give absolute position to div instead.

<script src="https://cdn.tailwindcss.com"></script>
<div >
    <div >
        <div >
            <ul >
                <li >
                    <div>
                        <a href="#">
                            <img 
                                src="https://i.imgur.com/tSxyAT4.jpeg" alt="altText" />
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

CodePudding user response：

Because of this line - <div >

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 >
    <div >
    
        <!-- here -->
        <div >
            ...
        </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