如何使用Tailwind CSS将社交媒体侧边栏固定在屏幕右下角

问题根源 #

你当前使用的absolute定位是相对于最近的非静态父元素生效，页面滚动时会跟随父元素位移，因此无法固定在视口位置。要实现不受滚动影响的右下角固定效果，需改用fixed定位，该定位模式直接相对于浏览器视口生效。

具体修改方案 #

1. 新增统一的外层容器，给外层配置fixed定位属性，全局控制侧边栏的固定位置
2. 删除原代码中冗余的absolute、inset-y-96、重复的z-50等定位属性，由外层容器统一管控
3. 可选添加过渡属性优化hover交互的流畅度

修改后完整代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

<!-- 外层固定容器，调整right、bottom值可修改侧边栏的具体位置 -->
<div class="fixed right-0 bottom-8 z-50 flex flex-col gap-3">
  <div class="group">
    <div class="w-10 group-hover:w-12 h-10 bg-yellow-500 flex items-center justify-center transition-all duration-300">
      <a href=""> <span class="mx-auto text-2xl text-white cursor-pointer fab fa-instagram"></span></a>
    </div>
  </div>
  <div class="group">
    <div class="w-10 group-hover:w-12 h-10 bg-yellow-500 flex items-center justify-center transition-all duration-300">
      <a href="" target="_blank"> <span class="mx-auto text-2xl text-white cursor-pointer fab fa-facebook"></span></a>
    </div>
  </div>
</div>

效果说明 #

修改后侧边栏会始终固定在视口右下角，页面滚动、窗口尺寸变化都不会改变位置，hover时的宽度缩放交互也可正常触发。如果需要调整侧边栏距离底部、右侧的间距，只需修改外层容器的bottom和right属性值即可。

内容的提问来源于stack exchange，提问作者Fayakon