Question

我试过位置：固定；在 css 中，但没有运气。请注意，当您滚动到底部时，该选项卡将不再可见。有没有办法让标签栏粘在页面底部？

https://www.w3schools.com/code/tryit.asp?filename=GNG72910J1X0

Answer 1

移除 position: absolute; 并将 top: 100%; 更改为 bottom: 0;。

.social-icons {
  position: fixed;
  height: 90px;
  bottom: 0;
  width: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #46ce4f;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 35px 30px -30px #777;
}

span {
  margin: 0 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ff0;
  line-height: 50px !important;
  text-align: center;
  color: snow;
  font-size: 25px !important;
  box-shadow: 1px 1px 1px -1px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

span:hover {
  opacity: 1;
}

span:before {
  position: relative;
  z-index: 1;
}

span:nth-of-type(1) {
  background: #ea4335;
}

span:nth-of-type(2) {
  background: #191919;
}

span:nth-of-type(3) {
  background: #4867aa;
}

span:nth-of-type(4) {
  background: #800080;
}

span:nth-of-type(5) {
  background: #00aced;
}

span:nth-of-type(6) {
  background: #ea4c89;
}

.after-span {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.75s ease-in;
}

span:hover .after-span.ripple {
  transform: scale(1);
  transition: transform 1s ease-out;
}

@media (max-width: 740px) {
  span {
    margin: 0 8px;
  }
}

@media (max-width: 500px) {
  .social-icons {
    flex-wrap: wrap;
    height: auto;
    padding: 10px;
  }
  span {
    margin: 10px;
  }
}

<script src="https://use.fontawesome.com/b01e280e04.js"></script>

<div class="social-icons">
  <span class="fa fa-google"><a class="after-span ripple"></a></span>
  <span class="fa fa-codepen"><a class="after-span ripple"></a></span>
  <span class="fa fa-facebook"><a class="after-span ripple"></a></span>
  <span class="fa fa-github"><a class="after-span ripple"></a></span>
  <span class="fa fa-twitter"><a class="after-span ripple"></a></span>
  <span class="fa fa-dribbble"><a class="after-span ripple"></a></span>
</div>

在 Codepen 上检查它的操作：https://codepen.io/manaskhandelwal1/pen/GRNqRJX?editors=1100

如何使标签栏粘在页面底部？

1 个答案: