Position Fixed Tutorial

If you’ve read my Position Fixed Showcase blog post, you’ll know that I’ve noticed a recent trend for fixed position elements and background image in website design. Here’s a tutorial on how to achieve this effect yourself.

Fixed Background

This is the easiest fixed position effect to achieve.

1. We’ll start by building a basic webpage in XHTML and CSS. The webpage has a floated two div layout (navigation and content).

XHTML

CSS

This will give us something like this:

But you’ll notice that, when you scroll through the content, the background image ends, leaving a lovely white space!

2. So the solution? Fix the position of background image. And this is really simple. Simpy change the line of CSS that adds the background image to the body.

CSS

Now, as you scroll through the content, the background image does not move!

View a demo

Fixed Elements

Unfortunately, at the moment, when scrolling through the content, the navigation disappears, and to use it, you’ll have to scroll all the way back up. So let’s fix it to the browser window.

1. Using what you already have from before, add “position: fixed” to the navigation and position it at the top left of the browser window.

CSS

2. Oops! The nav is definitely fixed to the top left of the browser window, but it’s also obscuring the content!

No problem, add some left margin to the content and you’re sorted.

CSS

View a demo