悬停在固定导航上的 tailwindcss 警报
Posted
技术标签:
【中文标题】悬停在固定导航上的 tailwindcss 警报【英文标题】:tailwindcss alert hovering over fixed nav 【发布时间】:2018-10-02 20:59:28 【问题描述】:我有一个使用 Rails 5、Ruby 2.4 构建的 Web 应用程序。我使用 Tailwindcss 作为我的设计框架。
我有一张英雄图片(下图),其中我使用像警报一样的顺风作为横幅来宣传新的网上商店的商品。它恰好位于我希望它成为英雄的位置,但是在页面滚动时它浮动在我的固定导航上,并且在导航菜单下拉的移动视图中它浮动在它的上方,阻塞了导航视图。
我不太清楚如何解决这个问题,所以它位于导航后面并且不会阻碍导航功能。
链接到网站以供查看 Loadlead website
我的英雄形象代码:
<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 & 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>
这里的任何帮助将不胜感激!
【问题讨论】:
【参考方案1】:您需要将英雄设置为相对位置,将横幅设置为绝对位置。
【讨论】:
在您的回答中添加一些代码,例如您将使用的css
示例,将提高您回答的质量。以上是关于悬停在固定导航上的 tailwindcss 警报的主要内容,如果未能解决你的问题,请参考以下文章
TailwindCSS + Alpine 移动导航栏不起作用
为啥在tailwindcss的自定义类中我不能定义2悬停:?
将鼠标悬停在 Tailwindcss 中时如何增加文本输入宽度(带过渡)