我的粘性定位元素没有发挥应有的作用

Question

通常，我对粘性位置没有任何问题属性。但是，我不明白为什么我的 div 不是这样。

在此处查看问题：my link

右边的预留部分.practitionerRight #reservation包裹在更高的div.practitionerRight中。

它应该保持在顶部：80px 但它没有。我阅读了有关粘性定位的 Stack Overflow 主题，但在那里找不到解决方案。

这是实际的 css 代码：

position: -webkit-sticky;
position: sticky;
top: 80px;

感谢那些愿意帮助我的人。

Answer 1

您 div 的 ID main 有 overflow-x: hidden。 div 是您想要粘性和溢出隐藏的子项的父项不能很好地与位置：粘性一起使用。删除 overflow-x: hidden css 并且它有效（style.css 中的第 118 行）：

#main{
min-height:100%;
width: 100%;
/* overflow-x: hidden; */ //remove this
}

反正也没什么溢出来的

My sticky positioned element isn't acting like it should