css - 禁用固定按钮位置

Question

我正在编辑一个带有社交媒体按钮的设计，当您向上和向下滚动页面时，这些按钮会跟随您。我希望停止这种行为，以便它们仅在您处于顶部时可见。我认为这是相关代码（不是 100% 确定）：

.rt-social-buttons .rt-social-icon {
   height: 43px;
   width: 43px;
   float: right;
   display: block;
   background-repeat: no-repeat;
   margin-bottom: 2px;
   -webkit-transition: width 0.2s ease-in, background-color 0.2s ease-in;
   -moz-transition: width 0.2s ease-in, background-color 0.2s ease-in;
   -o-transition: width 0.2s ease-in, background-color 0.2s ease-in;
   -ms-transition: width 0.2s ease-in, background-color 0.2s ease-in;
   transition: width 0.2s ease-in, background-color 0.2s ease-in;
 }

.rt-social-buttons .rt-social-icon:hover {
   width: 150px;
 }

网站在这里。

我需要从上面的代码中删除什么来阻止按钮移动？

Answer 1

按钮在滚动时卡在页面上的原因是position: fixeddiv 上的.rt-social-buttons。

这是我为使它们在右侧保持静态所做的操作：

1.) div.rt-social-buttons得到position:absolute而不是position:fixed

2.) div.rt-social-buttons被拉出到body 中（.containerdiv 是相对定位的，所以绝对定位.rt-social-buttonsdiv 里面不会让它定位在同一个地方。