i have no clue but it seems to work i found an answer to your question
position: fixed always fixates an element to some position within its scrolling container or the viewport. No matter how you scroll its container, it will remain in the exact same position and not affect the flow of other elements within the container.
Without going into specific details,
position: sticky basically acts like
position: relative until an element is scrolled beyond a specific offset, in which case it turns into
position: fixed , causing the element to “stick” to its position instead of being scrolled out of view. It eventually gets unstuck as it gets scrolled back toward its original position