绝对定位不会粘在底部

Question

我正在尝试创建一个1页的滚动布局:http: //codepen.io/TimRos/pen/vOXVQM

每个"页面"都是这样构建的:

section {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

现在,我希望能够通过单击位于该部分底部的锚点来滚动到不同的部分.这在#home部分工作正常:

<a data-scroll href="#gallery"><span class="arrow">&or;</span></a>

CSS:

 .arrow {
        position: absolute;
        bottom: 0;
        width: 60px;
        font-size: 3em;
        color: #e3e3e3;
        background: #3f3f3f;
    }

当我在每个部分放置完全相同的锚点时,只要我给它一个位置:绝对; 和底部:0; 归因于它位于#home部分的底部,但我希望它坚持其父容器的底部.

页脚也存在同样的问题,绝对定位会粘在第一部分的底部,而不是它的父部分.

出了什么问题？

Answer 1

你需要添加"position:relative;" 到它的父容器.这将使其相对于父元素绝对定位.