html - 网站侧面的粘性按钮(不动)

Question

我有两个社交媒体按钮，我想将它们放在一边，即使向下滚动也能留在那儿，尝试了 <ul>但截至目前，按钮位于顶部的尴尬位置。

电流:

目标:(取自另一个网站)

按钮:

  <div class="container">
    <ul>
      <li>
        <a class="btn btn-outline-light social-media-button fa fa-facebook" href="https://www.facebook.com/infinitygroupint/"></a>
      </li>
      <li>
        <a class="btn btn-outline-light social-media-button fa fa-instagram" href="https://www.instagram.com/infinitygroup.ph/"></a>
      <li>
    </ul>
  </div>

CSS:

.social-media-button {
    position: absolute;
    -ms-transform: translate(-50%, -50%);
    border: 2px solid #fff !important;
    cursor: pointer;
    font-weight: 600 !important;
    text-align: center;
    z-index: 1;
    display: block;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.btn-outline-light {
    color: #f8f9fa;
    border-color: #f8f9fa;
}

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

我应该在我的 CSS 中添加什么以使按钮保持在一边？它再次位于侧面，当我向下滚动时它保持在同一位置。

Answer 1

不是position absolute，你需要加上position fixed然后给top和right。如示例所示。

.social-media-button {
    position: fixed;
    top: 100px;
    right: 20px;
}