position: fixed

Fixed positioning removes an element from the document flow and fixes it to the viewport, making it stay in place while scrolling. This is useful for navigation bars, modals, and floating buttons.

Fixed Positioning Basics

CSS

/* Fixed positioning sticks to viewport */
.element {
  position: fixed;
  top: 0;
  left: 0;
}

/* Element stays in place while scrolling */

/* Fixed footer at bottom */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #333;
}

/* Floating action button */
.fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: blue;
}

Common Patterns

CSS

/* Sticky header */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
}

/* Main content with margin for fixed header */
main {
  margin-top: 64px;
}

/* Modal dialog */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 100;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  z-index: 101;
}

Note

Fixed positioning fixes an element to the viewport. It's useful for navigation, modals, and floating action buttons. Remember to account for fixed elements in layout (add margins to content).

Sticky positioning: [position: sticky](/css/position-sticky).