Ensure the remaining content doesn't hide behind the #navbar

PHOTO EMBED

Sat Oct 09 2021 11:20:02 GMT+0000 (UTC)

Saved by @ianvalentino #html #forms

/* #navbar is the topmost element and <main> contains all other content */

#navbar {
  /* CSS property ensuring #navbar always stays in the same place even if the page is scrolled: */
  position: fixed;
}

main {
  /* Ensure the remaining content doesn't hide behind the #navbar: */
  position: absolute;
  z-index: 1;
  top: 100px;
}
content_copyCOPY

Oh no! You spent days creating this awesome, static blog website but now your client wants the navigation bar fixed at the top of the screen. You managed to fix the #navbar element but it appears that the top of the remaining content hides behind the navigation bar! How will you sort it out? Your #navbar has the height of 100px exactly.

https://www.codecademy.com/practice/tracks/learn-css/modules/learn-css-display-positioning