CSS `Position: Fixed` Not Moving On Scroll

I tried to put a position: fixed on the div “.ais-search-header”, but it does not move while on scroll. I also try to drag it out from the parent div, but still did not work.

URL: https://kickegg0.myshopify.com/search.searchdata?q=q Pass: tweast

Answer

A position: fixed element has no dependency to its parent container. Its position actually depends on the browser window. That means it won’t move or scroll on page scroll. It will be on top of the page. But those under that element will scroll according to the page. If you want to move the container according to scroll, give it position: absolute like:-

#parent {
    position: relative;
}
#container {
    position: absolute;
}

So that it will be inside the container and will move on page scroll.