18 - Fixed Position

position: fixed

The fixed position works similar to absolute by taking an element out of the normal flow of the page. However, fixed elements stay where they are placed on the screen even when you scroll up and down of the page.

For example, let’s look at this draft HTML:

<h1>Site Draft</h1>
<ul>
  <li><a href="#about">About</a></li>
  <li><a href="#projects">Projects</a></li>
</ul>
<div id="about">
  <h2>About</h2>
</div>
<div id="projects">
  <h2>Projects</h2>
</div>

If we wanted to ensure the ul unordered list element was always on the page no matter where we scrolled on our site:

ul {
  background-color: lightyellow;
  border: 2px solid;
  padding: 2px;
  list-style-type: none;
  position: fixed;
}
 
div {
  height: 75vh;
}
 
#about > h2 {
  background-color: lightseagreen;
}
 
#projects > h2 {
  background-color: orange;
}

With the position of the ul unordered list element set to fixed, we’d get something like the following: