5.3: Fixed

An element given a fixed position

• Will be isolated, relative to the document

• Unaffected by scrolling

Add the following to your code

<div class="barRed"></div>

.barRed{
  width: 70em;
  height: 100px;
  position: fixed;
  background: #C0392B;
  top: 50%;
}

You should have a rectangle spanning the box that stays in the same spot when you scroll the page up and down.

Why does it not go all the way to the top or bottom of the wrapper? What is its position? What is it fixed to?

Navigation bars are elements/features that often assigned a fixed position.