Position Sticky in html header is not working, how can I make it work?

Question

I am trying to make the header sticky I have spent half an hour debugging it, could somebody help me out with it?

I am sure I am missing something but I cannot quite figure it out.

This is the codepen.

https://codepen.io/hashir621/full/gORELOo

HTML:

<div class="parent_header">

  <div class="header">

  </div>

</div>

<div class="test_height">

</div>

CSS

.parent_header {
  height: 100px;
}

.header {
  background-color: green;
  width: 100vw;
  height: 100px;

  position: sticky;
  top: 0;
}

.test_height {
  background-color: red;
  width: 100vw;
  height: 1000px;
}

Answer 1

Find the below code snippet

.header {
  background-color: green;
  width: 100vw;
  height: 100px;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

.test_height {
  background-color: red;
  width: 100vw;
  height: 1000px;
}

<div class="header">

</div>



<div class="test_height">

</div>

Answer 2

.header {
  background-color: green;
  width: 100vw;
  height: 100px;
  position: fixed;
  top: 0;
}

.test_height {
  background-color: red;
  width: 100vw;
  height: 1000px;
}

<div class="header">

</div>



<div class="test_height">

</div>

You could use position: fixed; too.