如何解决使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。