CSS`Position：Fixed`不会在滚动上移动

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

元素position: fixed不依赖于其父容器。它的位置实际上取决于浏览器窗口。这意味着它不会在页面滚动时移动或滚动。它将位于页面顶部。但该元素下的内容将根据页面滚动。如果你想根据滚动移动容器，请输入position: absolute：-

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

这样它将位于容器内部并在页面滚动时移动。

Answer 2

Chrome 和 Firefox 中存在一个错误，position: fixed当存在设置了transformorbackface-visibility属性（或它们的 webkit 等效项）的祖先元素时，它不会相对于屏幕定位。

将您想要的元素绝对放置在具有这些属性的元素上方。