Search code examples
css-positionsticky

How can I make my header sticky and on top of everything?

I currently have my header sticky but of some reason it has an opacity. I want it to be relative and sticky but I can't assign both to the header.

This is what I have:

.header {
  height: 80px;
  padding: 0px;
  background-color: #007eb6;
  position: sticky;
  top: 0;
}
Solution

  • Use the z-index property to stack your div on top of everything with the position: sticky,

    if you mean that you want your header to scroll down with you when you're scrolling, then you're looking for position: fixed.

    And for the opacity part, it's most likely your header is inside a div which has the opacity property, so check that as well or get your header div out of it.

    Hope this helps.

    .header {
  height: 80px;
  padding: 0px;
  background-color: #007eb6;
  z-index: 99;
  position: sticky;
  top: 0;
}
    <div class="header"> header here</div>
<div>here's another content</div>