如何用顺风将图像定位在顶部？

Question

我对尾风CSS很陌生。

有谁知道如何存档下面的示例吗？

我一直在尝试使用relative和absolute定位

但我不知道如何对绝对属性进行居中。

​

​

如有任何意见，将不胜感激。

​

<div class="relative h-64 m-8 overflow-hidden bg-indigo-500  rounded-lg">
  <div class="absolute  flex w-full h-full">
    <div class="relative z-30 w-5/6 px-6 py-8 text-white md:py-10 md:w-1/2">
      <h2 class="text-5xl">Tailwind responsive header</h2>
      <span></span>
    </div>
    <div class="absolute  right-0 flex w-full  h-full">
      <div class="w-1/3 h-full bg-indigo-500"></div>
      <div class="relative w-1/3">
      </div>
    </div>
  </div>

  <div class="absolute  right-0 yop-4 block w-5/12 m- right-0">
    <img alt="Snowy mountain lake" class="object-cover h-full min-w-full object-scale-down h-48 w-96" src="https://images.unsplash.com/photo-1607025952930-da2ac6748e7a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80"
    />
  </div>
</div>

<script src="https://cdn.tailwindcss.com"></script>

​

Answer 1

尝试将z-index类：z-10应用于您想要放在顶部的元素，建议使用缩进来区分哪些结束标记匹配它们在html中对应的开始标记。