我想在页脚底部添加一个小图标,它会在我滚动时向上或向下滚动,而不是停留在原处。
我不确定图片是否设置为粘在滚动条上,或者很可能是 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 -->
最佳答案
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 -->
关于html - 页脚上的图像不会停留在页脚上,并且会在您向上/向下滚动时移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57749105/