中心图像位于div底部，视口高度为

Question

我试图将图像放在div的底部。 div的视口高度为100，但最小高度为680px。图像很好地位于底部，直到我开始向下滚动页面并且视口高度小于680px。

HTML：

<header>
    <div class="container">
        <div class="arrow">
           <img src="arrow.png">
        </div>
    </div>
</header>

CSS：

header {
    background-color: #29a9e2;
    height: 100vh;
    min-height: 680px;
    background-size: cover;}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0px auto;}

.arrow {
    /* this is just what i've been experimenting with*/
    position: absolute;
    left: 0;
    bottom: 0;
    padding-top: 600px;}

这是一个小提琴，展示了我的问题。 https://jsfiddle.net/u7b95fve/

（使视口小于680像素，然后向下滚动）。 谢谢你的帮助。

Answer 1

您需要将position:relative添加到<header>的样式。

然后position:absolute的{​​{1}}将正常运作。

原因：如果您想要将元素绝对定位在另一个元素中，则必须显式声明父元素的定位。