无法将图像与容器底部对齐

如何解决无法将图像与容器底部对齐

我有一个 10vh 高的导航栏和一个 90vh 高的横幅。我在横幅框中也有一张图片。我想将图像与屏幕底部对齐，因此我为图像提供了 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

解决方法

只需将 position: relative; 添加到 .banner。

在父级上没有相对的情况下，绝对根据最近的相对祖先来定位自身。如果没有，则转到窗口。

,

.banner{
width: 100%;
height: 90vh;
background-color: chocolate;
overflow: hidden;
position:relative;

}
.banner img{
position: absolute;
width: 100%;
height: 30vh;
bottom: 0;
}

去做