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

【问题标题】：Using absolute position to place image above another image using Tailwind CSS使用 Tailwind CSS 使用绝对位置将图像放置在另一个图像上方
【发布时间】：2020-12-24 20:58:49
【问题描述】：

我喜欢使用 tailwind css 将图像放置在另一个图像上，我想知道如何主要使用 tailwind 实用程序类来实现。

现在我正在使用：

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

虽然它有效，但我喜欢使用顺风类，例如

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>

【问题讨论】：

标签： javascript css tailwind-css

【解决方案1】：

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

Tailwind 预设类在边距的 rem 值中相当高，但如果您需要更具体的东西，而 TW 没有预先打包，您可以随时 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>

【讨论】：

jheth，无论如何我可以实现类似 mt-200 ml-260 的东西，这些值似乎不受支持。
是的，只需在 Tailwind 配置文件中扩展边距。您可以根据需要添加任意数量的不同变体。
thx，知道了，所以现在在我的 tailwind.config.js 中，我在间距部分“200px”：“12.5rem”中有这个定义。现在我可以使用 mt-200px