CSS `Position: Fixed` Not Moving On Scroll

Question

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 1

There is a bug in Chrome and Firefox where position: fixed does not position relative to the screen when there is an ancestor element with the transform or backface-visibility attributes (or their webkit equivalents) set.

Move the element you want absolutely positioned above the elements with those attributes.

Answer 2

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.

Answer 3

Position 'fixed' positioning is based on your browser window so not move with scrolling. if you want to move with scrolling use position 'absolute'