Question

我有两个社交媒体按钮，即使向下滚动时我也希望保留在一边，并停留在那儿，尝试了<ul>，但是到目前为止，这些按钮都位于顶部的尴尬位置。 / p>

当前

：

目标：（从另一个网站获取）

按钮：

  <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

代替绝对位置，您需要添加固定位置，然后给出顶部和右侧。如例如

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

Answer 2

尝试一下：

您需要为父div position fixed设置absolute而不是ul：

，然后根据您的要求设置top left right bottom。

.container {
  height: 900px;
  /*temp height for demo*/
}

.container ul {
  position: fixed;
}

.container ul li {
  list-style-type: none;
}

.social-media-button {
  -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;
}

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

网站侧面的粘滞按钮（不能移动）

2 个答案: