Предупреждение tailwindcss зависает над фиксированной навигацией

Question

У меня есть веб-приложение, которое я создаю в Rails 5, Ruby 2.4. Я использую Tailwindcss в качестве основы дизайна.

У меня есть изображение героя (ниже), в котором я использую предупреждение как попутный ветер как баннер для рекламы нового интернет-магазина для мерч. Он расположен именно там, где я хочу, чтобы он был героем, однако при прокрутке страницы он плавает по моему фиксированному навигационному меню, а в мобильном представлении с выпадающим меню навигации он плавает поверх него, блокируя навигационное представление.

Я не слишком уверен, как это исправить, чтобы он стоял за навигацией и не мешал работе навигационной системы.

ссылка на сайт для просмотра сайта Loadlead

код изображения моего героя:

<div class="flex flex-wrap sm:block bg-transparent" id="header-hero">
  <div class="container mx-auto">

    /* BANNER THATS CAUSING ISSUES */
    <div class="bg-transparent text-center py-4 lg:px-4">
      <div class="p-2 bg-load-lead-green items-center text-white leading-none lg:rounded-full flex lg:inline-flex opacity-75 border-b-4 border-black md:mt-8">
        <span class="flex rounded-full bg-blue uppercase px-2 py-1 text-xs font-bold mr-3 border-b-2 border-black">New</span>
        <span class="font-semibold mr-2 text-left flex-auto">Pre-order LoadLead gear in our new web store</span>
        <svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>
      </div>
    </div>
/* END BANNER */

    <div class="flex py-8 px-4 sm:px-8">
      <div class="w-full py-8">
        <p class="text-4xl text-black font-sans font-bold mb-1">Trucking. Simplified</p>
        <p class="text-xl text-black sm:text-lg mb-6 font-sans font-semibold">Minimize your trucks downtime &amp; keep your loads moving!</p>
        <a class="bg-blue text-white no-underline uppercase text-sm px-4 py-2 rounded-full font-bold hover:bg-blue border border-b-4 border-black hover:border-transparent cursor-not-allowed" href="/#">Take a Tour</a>
        <a class="bg-load-lead-green text-white no-underline uppercase text-sm px-4 py-2 rounded-full font-bold hover:bg-load-lead-green border border-b-4 border-black hover:border-transparent cursor-not-allowed" href="/#">Join the Community</a>
      </div>
    </div>
  </div>
</div>

Любая помощь здесь будет принята с благодарностью!

Answer 1

Вы должны иметь своего героя как относительное и баннер как абсолютные позиции.