The property position: sticky is not working

Question

I have this HTML code:

<div class="header">
  <div class="desc">Description</div>
  <div class="logo"><img src=""/></div>
  <div class="navbar"></div>
</div>

.header has a height of 150px and .navbar has a height of 20px. When the user scrolls, I want .navbar to stick at the top. So I went to the CSS and set position: sticky and top: 0. But this didn't work. I initially thought that Firefox is not supporting position: sticky, but that's not the case because I was able to see a working demo of it. I googled it but found nothing helpful. Anyone knows why this is not working?

Answer 1

It works fine if you move the navbar outside the header. See below. For the reason, according to MDN:

The element is positioned according to the normal flow of the document, and then offset relative to its flow root and containing block based on the values of top, right, bottom, and left.

For the containing block:

The containing block is the ancestor to which the element is relatively positioned

So, when I do not misunderstand, the navbar is positioned at offset 0 within the header as soon as it is scrolled outside the viewport (which, clearly, means, you can't see it anymore).

.navbar {
  background: hotpink;
  width: 100%;
  height: 50px;
  position: sticky;
  top: 0;
}

.header {
  height: 150px;
  background: grey;
}

body {
  height: 800px;
  position: relative;
}

<div class="header">
  <div class="desc">Description</div>
  <div class="logo"><img src="" /></div>
</div>

<div class="navbar"></div>