Fixed Position

We've seen how using absolute and relative positioning can position elements inside each element. There is another positioning style we can use that fixes elements on the screen no matter the scroll height. A common use is a fixed navigation at top that's always visible or a back to top link that shows at the bottom right of the screen.

Static Positioning

By default, the HTML elements take up their relative positions and stay where they are. We can demonstrate this by setting a large height on the body so we need to scroll to the bottom. The header text stays at the top.

Fixed Position

CSS fixed position stays fixed to the screen coordinates. It is not positioned relative to any elements. Let's fix the header to the top of the screen to simulate our sticky navigation.

By setting position: fixed on the .site-header the header's default position is top: 0, left: 0. The header is removed from the flow as we've seen when we position elements absolutely and no longer expands to the full width. We can set a width of 100% on the .site-header to take up the full screen width.

Positioning

We can also use the left, right, top, and bottom positioning properties for our fixed position.