Div doesnt show up when I removed absolute

Kopsie 0
Viewed 38

Im following a tutorial to recreate iPhone interface with Tailwind-CSS. When I removed absolute from the div that is supposed to make the camera line on top, the div disappear. Why does this happen?

The following is my code that was tweaked a bit from the original (I tried to make the camera line with a div, not two div)

<body>
    <div class="px-10 min-h-screen bg-purple-50 flex justify-end items-center">
        <div class="relative h-[712px] w-[350px] bg-black rounded-[60px] shadow-xl overflow-hidden border-[14px] border-black">
            <img src="img/wallpaper.webp" class="absolute inset-0 h-full w-full object-cover" alt="">
            <div class="h-6 w-40 top-0 absolute inset-x-0 bg-black mx-auto rounded-b-3xl">
            </div>
        </div>
    </div>
</body>

This is the original div

<div class="absolute top-0 inset-x-0">
      <div class="mx-auto bg-black h-6 w-40 rounded-b-3xl"></div>
</div>
tailwind-css css html
1 Answers

Look, you have to use position: absolute or position:relative for iphone camera line div.
Because if img with absolute position always sets above the camera line div.
And camera line div just become hidden under the img

I made a playground with your code https://play.tailwindcss.com/0KJO8bY1N4

<body>
  <div class="flex min-h-screen items-center justify-end bg-purple-50 px-10">
    <div class="relative h-[712px] w-[350px] overflow-hidden rounded-[60px] border-[14px] border-black bg-black shadow-xl">
      <img src="https://i.pinimg.com/originals/18/d0/b2/18d0b2f08e4a20ec0c6d67c57ff8e37c.jpg" class="absolute inset-0 h-full w-full object-cover" alt="" />
      <div class="relative inset-x-0 top-0 mx-auto h-6 w-40 rounded-b-3xl bg-black"></div>
    </div>
  </div>
</body>
Konstantin Savusia0
Related