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

问题描述

我想使用tailwind css将图像放置在另一个图像上，我想知道如何实际上可以主要使用tailwind实用程序类来完成此操作。

现在我正在使用：

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

虽然可以，但是我想使用顺风类，例如

class="top-200 left-260"

我尝试了几次顺风车课程，但无法正常工作。

<div class="relative">
  <div>
    <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>
</div>

解决方法

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

Tailwind预设类在保证金的rem值中非常高，但是如果您需要更具体的东西，而TW并未预包装，则可以随时.css添加所需的内容。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Image" style="display: block;">1</div>
<div class="Image" style="display: none;">2</div>
<div class="Image" style="display: none;">3</div>
<div class="Image" style="display: none;">4</div>