我正在嘗試在右下角創建社交媒體側欄。
現在它正在作業，但是當我向下滾動時它沒有固定。
我希望它保持固定在右下角，無論螢屏大小如何，它都應該出現在螢屏的右下角。
我怎樣才能修復它。
代碼鏈接
<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>
uj5u.com熱心網友回復：
發生這種情況是因為您給出了位置：相對而不是固定。
<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>uj5u.com熱心網友回復：
這是我的提議。我創建了額外的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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/355098.html
上一篇：Bootstrap5水平滾動到無