My sticky positioned element isn't acting like it should-CodePudding

Usually, I don't have any issues with the sticky position property. However, I can't figure out why my div isn't behaving so.

See the issue here : my link

The reservation part .practitionerRight #reservation on the right is wrapped within a higher div .practitionerRight.

It should stick to top: 80px but it doesn't. I read the Stack Overflow topics about sticky positioning but couldn't find the solution there.

Here is the actual css code :

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

Thanks to those who will try to help me.

CodePudding user response：

You're div with the id of main has overflow-x: hidden. That div is the parent of the child that you want sticky and overflow hidden doesn't play well with position: sticky. Remove the overflow-x: hidden css and it works (line #118 in your style.css):

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

There's nothing overflowing, anyhow.