Position: sticky does not work in firefox

Question

position: sticky is said to work in firefox, but I don't see my sidebar.

My html looks like this:

<div class="wrap"> <div class="sticky">side </div> <div class="content">content <div> <div> 

My css:

 .content{ height: 2000px; overflow: hidden; } .sticky{ position: sticky; width: 200px; float: left; } 

When I scroll down the sidebar, scroll through the contents. He does not stick. Does anyone know what the problem is?

Answer 1

It sticks if you specify the value of top :

 .sticky{ position: -webkit-sticky; /* for safari */ position: sticky; width: 200px; float: left; top: 10px; } 

fiddle

Answer 2

position: sticky does not work with table elements such as tr , as well as with some others.

The workaround is to wrap everything you want in a span element.

  <style>.sticky span {position: -webkit-sticky; position: sticky; top: 0;}</style> <td class='sticky' valign='top' width='200'> <span> (table contents) </span> </td> 

Related Answers and Solutions

Answer 3

I had the same problem, although I set the upper value, the sticky element did not stick. The solution was to set the value also for height ...

Answer 4

The pin position also does not work if the parent is set to overflow: hidden because it cannot correctly calculate the height.