Skip to content
Modern CSS Fundamentals

Position Fixed

I’m starting with position: fixed because it is the easiest one to understand.

When we use position: fixed, we are removing that element from the document flow and “fixing” the position of an element to a specific place in the viewport.

See the Pen position: fixed by Kevin (@kevinpowell) on CodePen.

Two classic examples of position: fixed are navigations and sharing widgets on blogs… and anyone who’s had one of those widgets covering content knows how annoying they can be, so use position: fixed with caution!

We use the inset properties to set the offset from the sides of the viewport. Positive values increase the offset, negative values degrease it.

.fixed {
  position: fixed;
  /* 10px from the left of the viewport */
  left: 10px;


  /* 30px from the top of the viewport */
  top: 30px;
}

And because we’re changing layout modes, there are a few changes that happen, such as the way the size is calculated.

.navbar {
  position: fixed;
  top: 0;


  /* the width shrink to match the content
     so this is one possible solution*/
  width: 100%;
}

See the Pen fixed navbar by Kevin (@kevinpowell) on CodePen.