When CSS position: sticky doesn’t work.

I spent a huge chunk of time at work yesterday trying to figure out why the hell webkits implementation of position: sticky, position: -webkit-sticky wasn’t working.

Applying it on the tablet site I was working on had no effect but when I viewed a demo site: http://html5-demos.appspot.com/static/css/sticky.html it works perfectly; so it was not a case of my browser not supporting the feature, It was definitely something in the markup or css that was screwing things up.

After some couple of hours hunting about, I found the culprit:

#bodyconstraint {
overflow: hidden !important;
}

A parent element has got overflow:hidden, and this, apparently throws position: -webkit-sticky off.

So in case you run into a situation where position: -webkit-sticky isn’t working, an heads-up: check to see if the element you want to position as sticky is not a child of a parent element that has had its overflow set to hidden.

Also, you need to set the top property of the element you want to position sticky. if not, it doesn't work too.