An element with the position sticky is positioned based on the user's scroll position.

It's not fully supported in every browser, however, so we will not use it in this exercise.

Now that we understand the usage of a position in CSS, we need to make the header superimposed on to the hero section. To do that, we need to make the header position absolute. As the header has no parent element, it will be positioned on the viewport itself.

Let's go back to the header section and add the position: absolute property:

header {
  width: 100%;
  height: 70px;
  background-image: linear-gradient(0deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 50%);
  position: absolute;
}

Let's save and see what we have:

We have now our first section and header well implemented. Let's continue to the next section.