Fixed Positioning

Fixed Positioning

  • Positions the element in relation to the browser window (not its containing element)

  • Fixed positioned element stays in place even if user scrolls down the page

  • Box offset properties (top or bottom and left or right) specify where the element should appear in relation to browser window

  • Fixed positioning commonly used to create a fixed navbar

.navbar {
  position: fixed;
}


A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn’t change when the window is scrolled.

Live Example

Fixed Positioning Example on jsbin.com

The div.navbar element above is set to position: fixed and will be positioned relative to the viewport (screen). Because fixed positioned elements stay in place, you can create a persisted (or fixed) navigation containing element as seen in the example above.