html - 页脚上的图像不会停留在页脚上，并且会在您向上/向下滚动时移动

Question

我想在页脚底部添加一个小图标，它会在我滚动时向上或向下滚动，而不是停留在原处。

我不确定图片是否设置为粘在滚动条上，或者很可能是 CSS 错误。

我已经尝试将图像设置为固定在 CSS 部分，但它主要做的只是将图像向左移动，它仍然上下滚动。

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
}

.page-footer {
  background: #e85259;
}

.blurb p {
  color: #faf9f9;
  font-weight: 100;
}

.blurb a {
  color: #faf9f9;
  font-weight: 100;
}

.container-footer {
  margin: auto;
  width: 100%;
  text-align: center;
}

#footer-images ul {
  padding: 0;
}

#footer-images li {
  list-style: none;
  margin: 0 10px;
  display: block;
}

#footer-images ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

<!-- Start - Footer -->
<!-- Footer -->
<!-- Footer -->
<footer class="page-footer font-small">

  <!-- Footer Links -->
  <div class="container">

    <!-- Grid row-->
    <div class="row text-center d-flex justify-content-center pt-5 mb-3">

      <!-- Grid column -->
      <div class="col-md-3 blurb mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Quienes somos</a>
        </h6>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-3 blurb mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Productos</a>
        </h6>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-3 blurb mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Sucursales</a>
        </h6>
      </div>
      <!-- Grid column -->


      <!-- Grid column -->
      <div class="col-md-3 blurb  mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Contacto</a>
        </h6>
      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row-->

    <hr class="rgba-white-light" style="margin: 0 15%;">

    <div class="container-footer">
      <div id="footer">
        <div id="footer-images">
          <ul>
            <img class="img-responsive" width="89px" height="73px" img src="https://imgur.com/UwZrFN9">
          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-8  blurd col-12 mt-5">

    </div>

    <!-- Grid row-->
    <div class="row d-flex text-center justify-content-center mb-md-0 mb-4">
      <!-- Grid column -->
      <div class="col-md-8  blurb col-12 mt-5">
        <p>+(503) 2243-4887</p>
        <p style="line-height: 1.7rem">Calle Adriatico y avenida rio Amazonas No. 1 Jardines de Guadaluppe, Antiguo Cuscatlan, El Salvador.</p>
        <p>© Jardin del Pan todos los derechos resevador</p>
      </div>`enter code here`
      <!-- Grid column -->

    </div>
    <!-- Grid row-->
    <hr class="clearfix d-md-none rgba-white-light" style="margin: 10% 15% 5%;">

    <!-- Grid row-->
    <div class="row pb-3">

      <!-- Grid column -->

</footer>
<!-- End - Footer -->

Answer 1

Position: fixed; 将使图像贴在显示器上。我认为您正在寻找 position: absolute; 因此图像将坚持其相对父级。在这种情况下，可能是页脚容器。

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
}

.page-footer {
  background: #e85259;
}

.blurb p {
  color: #faf9f9;
  font-weight: 100;
}

.blurb a {
  color: #faf9f9;
  font-weight: 100;
}

.container-footer {
  margin: auto;
  width: 100%;
  text-align: center;
}

#footer-images ul {
  padding: 0;
}

#footer-images li {
  list-style: none;
  margin: 0 10px;
  display: block;
}

#footer-images ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

<!-- Start - Footer -->
<!-- Footer -->
<!-- Footer -->
<footer class="page-footer font-small">

  <!-- Footer Links -->
  <div class="container">

    <!-- Grid row-->
    <div class="row text-center d-flex justify-content-center pt-5 mb-3">

      <!-- Grid column -->
      <div class="col-md-3 blurb mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Quienes somos</a>
        </h6>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-3 blurb mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Productos</a>
        </h6>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-3 blurb mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Sucursales</a>
        </h6>
      </div>
      <!-- Grid column -->


      <!-- Grid column -->
      <div class="col-md-3 blurb  mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Contacto</a>
        </h6>
      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row-->

    <hr class="rgba-white-light" style="margin: 0 15%;">

    <div class="container-footer">
      <div id="footer">
        <div id="footer-images">
          <ul>
            <img class="img-responsive" width="89px" height="73px" img src="https://imgur.com/UwZrFN9">
          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-8  blurd col-12 mt-5">

    </div>

    <!-- Grid row-->
    <div class="row d-flex text-center justify-content-center mb-md-0 mb-4">
      <!-- Grid column -->
      <div class="col-md-8  blurb col-12 mt-5">
        <p>+(503) 2243-4887</p>
        <p style="line-height: 1.7rem">Calle Adriatico y avenida rio Amazonas No. 1 Jardines de Guadaluppe, Antiguo Cuscatlan, El Salvador.</p>
        <p>© Jardin del Pan todos los derechos resevador</p>
      </div>`enter code here`
      <!-- Grid column -->

    </div>
    <!-- Grid row-->
    <hr class="clearfix d-md-none rgba-white-light" style="margin: 10% 15% 5%;">

    <!-- Grid row-->
    <div class="row pb-3">

      <!-- Grid column -->

</footer>
<!-- End - Footer -->