<div id=”fixed”>Fixed</div>

#fixed {

position: fixed;

top: 0;

left: 0;

width: 100%;

background: red;

padding: 10px;

}

As you can see, the div forces itself to the very top of the page. Fixed elements exist outside the flow of the page and are always relative to the viewport, never any containing divs. This can be quite restrictive at times, as positioning a static item in relation to other elements on the page can be difficult to achieve, but with JavaScript this can be helped (more on JavaScript in the next chapter).

An example of an element that typically uses a fixed position is a nav bar. A navigation bar typically sits on top of all other content at the very top of the page, and does not move regardless of where the user scrolls to on the page. This ensures that the user is able to get to the navigation options at all times. This helps usability of your webpage and is a widely used technique in the modern web landscape.