How to set fixed position but relative to container in CSS ?

In CSS, setting an element’s position as "fixed" relative to a container, rather than the entire viewport, can be done by using a combination of CSS properties. While position: fixed works relative to the viewport, there are other methods like position: sticky and position: absolute that can help achieve the desired behavior within a container.

Approach 1: Using position: sticky

position: sticky allows an element to act like a normal element until it reaches a specified offset value. Once the offset is reached, the element "sticks" in place as the page continues to scroll.

• The .sticky-header remains at the top of the container as the user scrolls.
• The sticky element stays confined to the parent container’s boundaries..

Approach 2: Using position: absolute with position: relative on Parent

To position an element relative to its container, use position: absolute on the child element and position: relative on the parent container. This method allows you to position the child element anywhere within the container.

• The .absolute-element is positioned at the bottom-right of the .container regardless of scrolling.
• The child element stays within the container's boundaries and moves with it if the container is scrolled.

Approach 3: Using position: fixed (Viewport-based)

position: fixed positions an element relative to the viewport, not the container. It is fixed in place even when the page is scrolled. While this approach doesn’t work relative to the container, it’s helpful to understand how it behaves.

• The .fixed-element stays at the bottom-right of the viewport, not the container.
• The element stays in the same position on the screen, even when the page is scrolled.