CODEWITHSUNDEEP
javascriptcsstailwind-css
Daryl Wong
Daryl Wong

Reputation: 2443

Using absolute position to place image above another image using Tailwind CSS

I have like to use tailwind css to position an image over another and I wonder how this can actually be done using mainly tailwind utility classes.

Now I am using:

style="top: 200px; left: 260px;"

Though it works but I have like to use tailwind classes such as

class="top-200 left-260"

I tried a couple of tailwind classes but I could not get it to work.

<div class="relative">
    <div>
      <img
        class="absolute mt-5 ml-0"
        src="@/assets/floor_image.jpg"
        width="600"
      />
    </div>
    <div>
      <img
        src="@/assets/blue_golf.png"
        style="top: 200px; left: 260px;"
        class="cursor-pointer absolute"
      />
    </div>
</div>

Upvotes: 2

Views: 21931

Answers (1)

JHeth
JHeth

Reputation: 8386

You could remove all the other divs and keep just the relatively positioned parent div with the 2 absolute positioned images both set to top: 0 and left: 0 then give the second image a margin on top and left to position it staggered over the other one.

Tailwind preset classes go pretty high into the rem values for margin but if you need something more specific that TW does not come pre-packaged with you can always extend the default theme to add what you need.

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<div class="relative">

  <img class="absolute top-0 left-0" src="https://picsum.photos/536/354" alt="Workplace" width="600" />

  <img class="cursor-pointer absolute top-0 left-0 mt-32 ml-40 hover:shadow-outline" src="https://picsum.photos/535/354" width="600" />

</div>

Upvotes: 6

Related Questions