Get a Fix on Position: Fixed

getafixonpositionfixed
With the modern Web and its hyper-fluid, mobile-friendly designs, you might think there isn’t much use for a piece of CSS code that makes a page element stay in the same place, like “position: fixed”.

But never fear, there are still uses for fixed element styles in your CSS! Read on to discover 2 ways that fixed elements actually help the style AND function of your page!

Use #1: Fixed Sidebar

Some websites have a little sidebar on some of their pages that scrolls with you in the same place on the screen, no matter how far down the page you go. That behavior is all because of “position: fixed;”.

For instance: a typical sidebar’s CSS, below.


#sidebar {
float: left;
color: #FFFFFF;
background-color: #000000;
border: 1px solid #FF0000;
font-size: 11px;
font-family: “Verdana”, “Arial”, sans-serif;
width: 180px;
height: 200px;
}

This would be a cute, basic little sidebar, but when the user scrolls up or down, the sidebar would vanish with the rest of the scrolled content.

However, if you wanted that little sidebar to stay with the user, you could simply add a couple of lines to the the CSS:


#sidebar {
float: left;
color: #FFFFFF;
background-color: #000000;
border: 1px solid #FF0000;
font-size: 11px;
font-family: “Verdana”, “Arial”, sans-serif;
width: 180px;
height: 200px;
position: fixed;
margin-top: 30%;
margin-left: 10%;

}

This fixes the sidebar in place, 300px from the top of the page, and 100px from the left side of the page. Now, if the window size changes, this measurement system would be a bit off, but for most desktop users, that should hold it in place sufficiently close to the main content without overlapping.

This technique would be useful for navigation sidebars as well as social media sidebars–it keeps a list of handy links nearby for users to easily navigate the page.

Use #2: Background Images

Large background images are great–that is, until you scroll down and you realize it’s not repeating down the page, or it’s repeating but the tiling effect is not smooth at all. If you’ve ever been in this position (as I have, many times), it’s very frustrating! But a fixed styling on your background image can save you a lot of hassle.

Say you have the body styles section of your CSS done like so:


body {
color: #000000;
background-color: #FFFFFF;
background-image: url(‘YOUR_COOL_IMAGE.GIF’);
background-repeat: no-repeat;
background-position: top center;
}

This would just place your background image at the top of the page, centered, and it would not tile, but it also wouldn’t affect anything but the top part of the page. Once your user scrolls down, that background image disappears.

However, if you added just one line to your body styles CSS, you could change that, like so:


body {
color: #000000;
background-color: #FFFFFF;
background-image: url(‘YOUR_COOL_IMAGE.GIF’);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
}

“background-attachment: fixed;”, in this case, works like “position: fixed;” with any other element. It forces the background to stay in the same place on the screen, meaning that your content and everything else scrolls on top of it.

This can be a beautiful look if you design for it properly; you just want to make sure that the text is still readable as your users scroll down the page. Fixed backgrounds are great for sites that don’t need a really detailed background, or that don’t use their background image as a header image.

Summary

Fixed elements still have a place in modern web designs–and these are just a couple of ideas. There are plenty more ways to use this design strategy!

One thought on “Get a Fix on Position: Fixed”

Leave a Reply

Your email address will not be published. Required fields are marked *