i am trying to create social media side bar on bottom right side.
right now it's working but when i scroll down it's not fixed.
i want it to remain fix on bottom right side regardless of screen size it should appear on bottom right side of screen.
how can i make it fixed.
<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>
CodePudding user response：
That happens because you've given position: relative instead of fixed.
<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>CodePudding user response：
Here is my proposition. I Created extra div container with position fixed and inset properties additional negative mt. I hope you will be content ;-) Here You can see this in action link
<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>