修复了使用顺风的侧边菜单 css

Question

我正在尝试在右下角创建社交媒体边栏。

现在它正在工作，但是当我向下滚动时它没有修复。

我希望无论屏幕大小如何，它都固定在右下角，它应该出现在屏幕的右下角。

我怎样才能修复它。

<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>

Answer 1

这是我的提议。我创建了额外的 div 容器，位置 fixed 和 inset 属性额外负 mt。我希望你会满意 ;-) 在这里你可以看到它的实际效果 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>

Answer 2

发生这种情况是因为您给定了 position: relative 而不是 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>

修复了使用顺风的侧边菜单 css

Fixed Side Menu using tailwind css

html

css

tailwind-css