Absolute positioning doesn't stick to bottom

Question

I'm trying to create a 1-page scrolling layout: http://codepen.io/TimRos/pen/vOXVQM

Every "page" is built like this:

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

Now I want to be able to scroll to the different sections by clicking an anchor point located at the bottom of the section. This works fine in the #home section:

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

When I place the exact same anchor point in every section, as soon as I give it the position:absolute; and bottom: 0; attribute it's stuck at the bottom of the #home section, but I want it to stick to the bottom of its parent container.

Same problem with the footer, with absolute positioning it sticks to the bottom of the first section, not it's parent-section.

What's going wrong?

Answer 1

You need to add "position:relative;" to it's parent container. This will make it absolute positioned relative to the parent element.

Answer 2

If you provide HTML, we could give you a better answer, but I am guessing that the immediate parent-section is not correctly positioned. Note that "absolute" will make the element position relative to its first positioned (not static) ancestor element (from W3Schools ).

So adding position:relative to the parent should make it work.