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;"添加到其父容器中。这将使其相对于父元素绝对定位。

Answer 2

如果你提供HTML，我们可以给你一个更好的答案，但我猜测直接的父节没有正确定位。请注意＆＃34;绝对＆＃34;将使元素相对于其第一个定位（非静态）祖先元素（来自W3Schools）。

因此，添加位置：相对于父级应该使其有效。

绝对定位不会粘在底部

2 个答案: