Fixing an Element's Position (CSS)

by kirupa   |   3 March 2012

When you are scrolling some content around, there is this expectation that everything moves in tandem with your scrolling:

scrolling things

There may be times when you don't want all of your content to scroll. For example, you may have some UI like a menu or some buttons that you would prefer keeping fixed in one location even if the rest of your content scrolls and moves around.

For example, you may have a picture of Chuck Norris that you would prefer to keep visible even if people scroll through your document:

initial

[ Chuck Norris can defy HTML layout ]

If you scroll down (see live example), notice that the picture stays the same even though the text and everything else scrolls:

scrolled chuck

[ even the layout engine is powerless in Chuck Norris's presence ]

As you will see in this tutorial, keeping an element's position fixed is pretty easy to do using just a few drops of CSS.

Let's get started!

The Position Property

Before we get to the code, let me first give an introduction to the position property found in CSS. This property specifies how your element positions itself on the page, and it will play a crucial role in helping keep an element's position stationary. For the purposes of this tutorial, let's focus on two values this property can have - static and fixed.

Static

By default, all of the elements in your document will have their position CSS property set to static. This means that all of your content appears as part of your document's normal flow and layout.

I like to think of elements positioned statically as being pieces in a finished puzzle:

stuck

As long as the position is kept at static, these elements are home. They are in the right place where they belong and won't budge.

Fixed

There is another value you can set for the position property, and that is fixed. What the fixed property does is pretty interesting. Elements whose position is fixed no longer participate in the document's normal flow and layout.

Instead, these elements ignore the document flow and are positioned relative to the viewport (the viewable area inside your browser). This is the behavior we want, for this is what ensures our elements don't move on the screen even if the rest of the content does!

Looking at the CSS

As you sawAs you may have inferred from the explanation provided earlier, all you really need to do is set the position CSS property to fixed to ensure content doesn't scroll or move around with the rest of the page:

#mainContent img {
position: fixed;
}

Once you have done this, any element that this rule applies to will have its position set to a fixed location on the screen.

To adjust where the element is positioned inside your viewport, set the left, right, top, and bottom properties. In my example, I have the left property set to 45px:

#mainContent img {
left: 45px;
position: fixed;
}

If you are hoping to have your fixed positioned element go over the rest of the content in your document, you will find yourself needing to set the z-index property to ensure nothing goes above it:

#mainContent img {
left: 45px;
position: fixed;
z-index: 10000;
}

The higher your z-index value, the lower the chance of any random element finding its way above the space taken up by your fixed positioned element. In general, you don't want content to go over your fixed positioned element.

Conclusion

Fixing an element's position on screen seems far more difficult than what it actually is. All you have to do is just set one CSS property, and you are pretty much golden....like a retriever!

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Brought to you by...

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!