为什么块被运输下来？使用 TailWind CSS答案

【问题标题】：Why does the block get transported down? Using TailWind CSS为什么块被运输下来？使用 TailWind CSS
【发布时间】：2023-04-10 15:25:01
【问题描述】：

<div class="w-auto h-30 m-5 overflow-hidden flex justify-center">
    <div>
      <img class="object-fit" src="https://fs.easybanners.com/Templates/795/TemplateIcon/795.png" alt="" style="height: 50vh;">
      <button class="bg-indigo-500 rounded absolute transform -translate-y-32 translate-x- px-12" style="transform:translateX(10px);"> Contact Us </button>
    </div>
</div>

我目前正在使用 TailWindCSS。我正在尝试为我的演示宠物店网站制作横幅。问题是当我在按钮中添加关于翻译的样式属性时，按钮被传送下来。按钮是绝对的。有人能解释一下为什么顺风会发生这种情况吗？

【问题讨论】：

你真正想要实现什么？
只使用引导 ig
我想在banner里面做一个按钮，就像一个按钮，这样客户就可以预约宠物美容了。
@WebDevDude 问题是关于顺风的
@WebDevDude 我可以这样做，但我会坚持顺风以节省更多空间。我也在使用顺风的 JIT 模式，这样可以节省很多空间。 Tailwind 也更加可定制。

标签： html css tailwind-css

【解决方案1】：

这是我到目前为止所做的：

<div class="w-auto h-30 m-5 overflow-hidden flex justify-center">
 <div class="">
  <img class="object-fit" src="images/banner/PetShopServicesBanner.png" alt="" style="height: 50vh;">
    <div class="float-right transform -translate-y-14 -translate-x-60">
      <button class="hidden md:block  md:w-52 py-2 bg-orange-500 text-gray-900 rounded absolute"> 
        <p> Make a pet groom schedule </p>
      </button>
    </div>  
  </div>
</div>

【讨论】：