[英]Fixed Side Menu using tailwind css
我正在尝试在右下角创建社交媒体侧栏。
现在它正在工作,但是当我向下滚动时它没有固定。
我希望它保持固定在右下角,无论屏幕大小如何,它都应该出现在屏幕的右下角。
我怎样才能修复它。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<div class="group relative z-50">
<div class=" absolute right-0 inset-y-96 w-10 group-hover:w-12 group-hover:mr-0 h-10 bg-yellow-500 flex items-center justify-center">
<a href=""> <span class="mx-auto text-2xl text-white cursor-pointer fab fa-instagram "></span></a>
</div>
</div>
<div class="group relative z-50">
<div class=" absolute right-0 inset-y-96 mt-12 w-10 group-hover:w-12 group-hover:mr-0 h-10 bg-yellow-500 flex items-center justify-center">
<a href="" target="_blank"> <span class="mx-auto text-2xl text-white cursor-pointer fab fa-facebook "></span></a>
</div>
</div>
发生这种情况是因为您给出了位置:相对而不是固定。
<div class="group fixed z-50 bottom-1/3 right-0"> <div class=" w-10 group-hover:w-12 group-hover:mr-0 h-10 bg-yellow-500 flex items-center justify-center"> <a href=""> <span class="mx-auto text-2xl text-white cursor-pointer fab fa-instagram "></span></a> </div> </div> <div class="group fixed z-50 bottom-1/4 right-0"> <div class="w-10 group-hover:w-12 group-hover:mr-0 h-10 bg-yellow-500 flex items-center justify-center"> <a href="" target="_blank"> <span class="mx-auto text-2xl text-white cursor-pointer fab fa-facebook "></span></a> </div> </div>
这是我的提议。 我创建了额外的div
容器,位置fixed
, inset
属性额外的负mt
。 我希望你会满意 ;-) 在这里你可以看到这个链接
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<div class="fixed inset-3 inset-y-80 -mt-6">
<div class="group relative z-50">
<div class="absolute right-0 inset-y-96 w-10 group-hover:w-12 group-hover:mr-0 h-10 bg-yellow-500 flex items-center justify-center">
<a href=""> <span class="mx-auto text-2xl text-white cursor-pointer fab fa-instagram"></span></a>
</div>
</div>
<div class="group relative z-50">
<div class="absolute right-0 inset-y-96 mt-12 w-10 group-hover:w-12 group-hover:mr-0 h-10 bg-yellow-500 flex items-center justify-center">
<a href="" target="_blank"> <span class="mx-auto text-2xl text-white cursor-pointer fab fa-facebook"></span></a>
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.