CSS to the Rescue! Episode 5: CSS Positioning – Conversion Wednesday

By Dan G


Today we’re going over the “CSS Positioning Options”. Imagine wanting to move a picture on your website to 10 pixels above where it is now, or setting it up so it floats with the page. Now you can do both those things and a whole lot more once you’ve learned all 4 of these CSS Positioning Options. Lets get started.

First is Static Positioning. HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of a page.
Static positioned elements are not affected by the top, bottom, left, and right CSS properties.

Fixed Positioning is when an element is positioned relative to the browser window. It will not move even if the window is scrolled. In other words, an element with fixed positioning moves down the page with you as you scroll.

A Relative positioned element is positioned relative to its normal Static position. The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element in its static position is still preserved in the normal flow.

Absolute Positioning is when an element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is (which is basically the entire page). Absolute positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element doesn’t even exist. In addtion, Absolutely positioned elements can overlap other elements.

Lets see each of these Positioning Options in action to get a visual understanding of what they mean.

Here we can see examples of a static and fixed positioning in action. Notice that Static positioning is basically where you would expect your text or images to end up. Now you can understand why this is the default positioning option for all CSS Elements.

Also Notice that Fixed Positioning is used for any element like a “Looking For” Widget or a “Survey Question Box” that you can only seem to get away from by closing or “X”ing it out.

Here we can see examples of Relative and Absolute positioning in action. Notice that Relative positioning is basically what you might use to nudge an element a few pixels to the right, left, top, or bottom. It’s the goto for any CSS editor trying to place an element exactly where they want it on a page.

Also Notice that Absolute Positioning is used for any element you want to position in the same place, while overlapping other elements, no matter what browser a web-surfer is using. This option is rarely used in this day and age because you can you can usually get an element in place by using either Relative or Fixed positioning.

Here is the actual CSS you could use for each Positioning Method.

Remember that these examples are “INLINE” CSS, if you don’t want to make “INLINE” CSS changes some other methods you could use to make the same changes are by using a class, id, or tag identifier with a separate CSS document or a completely separate set of style tags embedded within the page’s HTML. I go into more detail about this point in Episode 2 of this mini-series.

And that’s it, that’s our 5th episode in the “CSS To The Rescue” series. If you’ve learned something today that you realize your site could use and you don’t have the time or effort to put into changing or debugging a CSS issue on your site. Consider asking us to help you with these changes! We can comb your site and pick out all of the major outlying issues. Repair them with specific tests for your site, and then procure and analyze the change’s overall effect, and present you with the winning changes. It’s that easy!