html - 页脚上的图像不会停留在页脚上并在您向上/向下滚动时移动
问题描述
我想在页脚底部添加一个小图标,当我滚动而不是原地不动时,它会向上或向下滚动。
我不确定图像是否可能被设置为滚动条,或者很可能是 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 -->
推荐阅读
- javascript - 当用户在 react.s 中选择来自 api 的列表项时如何切换类?
- math - Perlin 噪声不同的实现
- python - scrapy python中的Unicode问题
- xamarin.forms - Xamarin 表单输入框使用自定义键盘丢失光标位置
- asp.net-core - Visual Studio 2019 Net 5 ASP.NET Core WebApp 错误 MSB3644 .NETFramework,Version=v5.0 的参考程序集未找到
- jquery - When user select 2 then two select box and input field will show and when 3 is selected then ONLY three select box and input fields is show
- javascript - 在页面加载方面是否可以加载js文件并在客户端使用js创建整个页面
- linux - 如何仅将缺少的参数添加到配置文件?
- python - 如何在 Windows 上使用来自 Python 数组的内容创建文件?
- ceph - ceph fs mds 卡在 `up:rejoin` 状态 - `未能打开 ino 0x101 err -116/0`