Fixed Positioning

The fixed position is quite interesting. It works pretty much like absolute positioning, with one important difference: An element with a fixed position stays in the designated place, even if you scroll up or down. This allows you to make "sticky elements", like menus, which are always at the top, bottom, left or right of the viewport, no matter how far you scroll.

Another important difference is that while you may have an absolute positioned element be positioned relative to its parent element (see the article on absolute positioning if you're curious), this is not possible with a fixed element - it's always placed in relation to the viewport (usually the browser window).

So, how is it used? Here's an example:

<style type="text/css">
.top-fixed {
	position: fixed;
	top: 0;
	right: 0;
	background-color: #eee;
	padding: 3px 10px;
}
</style>

<div class="top-fixed">Fixed element (Top)</div>
<p style="margin-bottom: 12000px;">Filler text</p>

Don't worry about the filler paragraph - it's simply there to make sure that the viewport is high enough for you to see the effect of the fixed element when scrolling.

Using the fixed value for the position property, along with the top and right properties, we can now tie our little box to the top, right corner and leave it there, even when the user scrolls. This is excellent for creating e.g. fixed top menus!

Be aware of the fact that just like with absolutely positioned elements or floating elements, a fixed element is taken out of the regular page flow, meaning that the browser no longer automatically allocates space for it. This can be seen in the above example, where our fixed element overlaps other elements on the page. To remedy this, you simply need to make sure that your page has the available space for your fixed elements, for instance by adding margins and paddings to surrounding elements. If you actually want the elements to overlap, you can control which element takes precedence using the z-index property, as described in the chapter about absolute positioning.

Fixed elements on other sides

You can tie your elements to all four sides of the viewport, just as easy as we did in the above example. It's simply a matter of using the top, right, bottom and/or left properties, depending on where you want the element. Here's an example:

<style type="text/css">
.fixed {
	position: fixed;
	background-color: #eee;
	padding: 3px 10px;
}
</style>

<div class="fixed" style="top: 0; left: 100px;">Top</div>
<div class="fixed" style="top: 100px; right: 0;">Right</div>
<div class="fixed" style="bottom: 0; left: 100px;">Bottom</div>
<div class="fixed" style="top: 100px; left: 0;">Left</div>

<p style="margin-bottom: 12000px;">Filler text</p>

Notice how easy it is - as long as the element has the position set to fixed, you can start using the top/bottom and/or left/right properties to position the element accordingly.

Summary

Fixed positioning is a powerful tool for creating sticky elements, which just means that even when the user scrolls through your page, the fixed elements remain in the same position within the viewport. This can be used in many scenarios, like sticky top menus, sharing buttons to the left or right which remains in place and so on.