How do you do the position absolute footer when you don't have the position relative parent element? I can only do the position fixed.

Answer 1

Setting an element's position to "absolute" will anchor it relative to whichever ancestor (parent, parent's parent... etc) element also has a set position value. If none of its ancestors has a set position, then it will fallback to the initial containing block, which is usually the body or html tag.

It sounds like the easiest solution for you would be to make a new CSS selector, targeting one of the parent or ancestor elements, and give that element position: relative;

That way, the absolutely positioned element will be contained within the relatively positioned parent.

For more reading about the different position values, search developer.mozilla.org for the "position" article and read that.

It's always worth reminding that CSS can never be the first step. It always relies on some HTML existing first. If you can't access or change your HTML, then applying best practice CSS patterns may be difficult.

That being said, it sounds like using position: absolute in your case will yield essentially the same result as using position: fixed, since your absolutely positioned element won't find any ancestors to contain it, and it will have to fall back to using the HTML tag. At that point, it will be functionally very similar to using position: fixed.