绝对定位不粘底

Question

我正在尝试创建单页滚动布局： http://codepen.io/TimRos/pen/vOXVQM

每个 "page" 都是这样构建的：

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

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

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

怎么了？

Answer 1

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

Answer 2

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

因此将 position:relative 添加到父级应该可以正常工作。

绝对定位不粘底

Absolute positioning doesn't stick to bottom

html

css

absolute