无法将图像与容器底部对齐
无法将图像与容器底部对齐
提问于 2021-07-24 18:59:41
我有一个10华氏度的导航栏，和一个90华氏度的标语。我还在横幅框中有一张图片。我想将图像与屏幕底部对齐，因此我为图像提供了position: absolute和bottom: 0参数，但它不起作用，因为它只将图像与视口的底部对齐。当我开始向下滚动时，图像不在横幅的底部。
HTML：
<nav></nav>
<div class="banner">
<img src="./Polygon 2.png" alt="">
</div>CSS：
body{
margin: 0%;
padding: 0%;
}
*{
padding: 0%;
margin: 0%;
box-sizing: border-box;
}
nav{
width: 100%;
height: 10vh;
background-color: blueviolet;
}
.banner{
width: 100%;
height: 90vh;
background-color: chocolate;
overflow: hidden;
}
.banner img{
position: absolute;
width: 100%;
height: 30vh;
bottom: 0;
}如果你在手机上打开这个链接，你会看到问题：https://elated-swirles-76c2d5.netlify.app
回答 2
Stack Overflow用户
发布于 2021-07-24 19:05:23
只需在.banner中添加position: relative;即可。
如果相对对象不在父对象上，则绝对对象将根据最接近的祖先进行自身定位。如果没有，它将转到窗口。
Stack Overflow用户
发布于 2021-07-24 19:24:14
.banner{
width: 100%;
height: 90vh;
background-color: chocolate;
overflow: hidden;
position:relative;
}
.banner img{
position: absolute;
width: 100%;
height: 30vh;
bottom: 0;
}去做吧
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68509348
复制相关文章
相似问题
腾讯云开发者
