我喜欢使用 tailwind css 将图像放置在另一个图像上,我想知道如何使用主要的 tailwind 实用程序类来实际完成此操作。
现在我正在使用:
style="top: 200px; left: 260px;"
虽然它有效,但我喜欢使用顺风类,例如
class="top-200 left-260"
我尝试了几个顺风类(class),但我无法让它发挥作用。
<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>
最佳答案
您可以删除所有其他 div 并仅保留相对定位的父 div,并将 2 个绝对定位的图像都设置为 top: 0 和 left: 0 然后给第二个图像在顶部和左侧留出边距以将其交错定位另一个。
Tailwind 预设类在 margin 的 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>
关于javascript - 使用绝对位置使用 Tailwind CSS 将图像放在另一个图像之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63760612/