绝对定位不粘底

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;
    }

当我在每个部分放置完全相同的锚点时，只要我给它位置：absolute;和底部：0；属性它卡在#home 部分的底部，但我希望它贴在其父容器的底部。

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

怎么了？

Answer 1

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

Answer 2

如果您提供 HTML，我们可以为您提供更好的答案，但我猜测直接父部分的位置不正确。请注意，“绝对”将使元素位置相对于其第一个定位（非静态）祖先元素（来自W3Schools）。

所以添加 position:relative to parent 应该可以工作。