javascript - Using absolute position to place image above another image using Tailwind CSS - Stack Overflow

admin管理员组

文章数量:1346317

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>

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>

• javascript
• css
• tailwind-css

Share Improve this question Follow edited Mar 21, 2021 at 10:07 Daryl Wong asked Sep 6, 2020 at 4:05 Daryl WongDaryl Wong 2,44166 gold badges3636 silver badges7979 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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 e pre-packaged with you can always extend the default theme to add what you need.

<link href="https://unpkg./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>

本文标签： javascriptUsing absolute position to place image above another image using Tailwind CSSStack Overflow