使用 Tailwind CSS 使用绝对位置将图像放在另一个图像之上

Question

我喜欢使用 tailwind css 将图像定位在另一个图像上，我想知道如何使用主要的 tailwind 实用程序类.

实际完成此操作

现在我正在使用：

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

虽然有效，但我喜欢使用 tailwind 类例如

class="top-200 left-260"

我尝试了几次顺风类但我无法让它工作。

<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>

Answer 1

您可以删除所有其他 div 并仅保留相对定位的父级 div 并将 2 个绝对定位的图像都设置为 top: 0 和 left: 0 然后给出第二个图像顶部和左侧的边距使其与另一个交错放置。

Tailwind 预设类将边距的 rem 值设置得相当高，但是如果您需要更具体的 TW pre-packaged 没有的东西，您总是可以 extend the default theme 添加什么你需要。

<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>

使用 Tailwind CSS 使用绝对位置将图像放在另一个图像之上

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

javascript

css

tailwind-css