Absolute positioning does not stick to the bottom
I am trying to create a 1 page scrollable layout: http://codepen.io/TimRos/pen/vOXVQM
Each "page" is structured as follows:
section {
display: flex;
min-height: 100vh;
flex-direction: column;
}
Now I want you to be able to scroll through the different sections by clicking the anchor point located at the bottom of the section. This works great in the #home section:
<a data-scroll href="#gallery"><span class="arrow">∨</span></a>
CSS
.arrow {
position: absolute;
bottom: 0;
width: 60px;
font-size: 3em;
color: #e3e3e3;
background: #3f3f3f;
}
When I put the same anchor point on each section, as soon as I give it a position: absolute; and below: 0; attribute it is stuck at the bottom of the #home section, but I want it to stick to the bottom of the parent container.
The same issue with the footer, when absolutely positioned, it sticks to the bottom of the first section, not the parent section.
What will go wrong?
source to share
You need to add "position: relative;" to the parent container. This will make it absolute relative to the parent element.
source to share
If you provided HTML, we could give you a better answer, but I'm guessing the immediate parent section is not set correctly. Note that "absolute" will make the position of the element relative to its first positional (non-static) ancestor element (from W3Schools ).
So adding the position: relative to the parent should make it work.
source to share