CSS Positioning

Written by Amanda Kern

The Box Model

By now you might have heard of something called the box model. Well, it's important we take a moment to introduce the box model before we get too much further into learning CSS Positioning. Ultimately the box model will affect how items are positioned.

Basically all html elements are considered a "box". Each element consists of four parts:

For each element you also have a width. The width applies only to the area of the content and does NOT include the specified values you have set for your margin or padding. Okay, it's time to make it visual...

box model

Okay, this might finally start to make a little sense - now it's time to complicate things more. Internet Explorer doesn't quite apply the box model the same, it actually increases the values of the margin and padding. This is important to know, luckily there are "hacks" to help fix this. Here are a few resources to help you better understand the box model.

Absolute Positioning

By choosing an absolute position you are pin pointing an exact location on your web page for an element to be positioned. When positioning an element you declaring a location based on the boundaries of the page. For instance:

#main {
position: absolute;
top: 400px;
left: 80px;}

The above style will position this element 400 pixels from the top of the page and 80 pixels from the left of the page. Absolute positioning should be used sparingly. If used properly they can be an effective technique in CSS layouts.

Z-index

The Z-index is a nice solution to give the appearance that elements are overlapping. Basically the Z-index allows you to stack elements. Much like in math, the x-axis is for horizontal positioning. The y-axis is for vertical positioning and the z-index allows things to come to the front (or back). Let's take a look at an example:

#main {
position: absolute;
top: 400px;
left: 80px;
z-index: 10;}

The above style is very similar to the last, with the only difference being that the z-index is set to 10, meaning it will appear higher than other elements on the page that have a z-index of less than 10.

Relative positioning

Relative positioning allows you to position elements based upon their relative position from other elements. Let's take a look:

#main {
position: relative;
top: 40px;
left: 20px;}

The above style will position the element relatively 40px from the top and 20 px from the left of where it would normally reside.

CSS Positioning Resources

Learn CSS Positioning in Ten Steps
[http://www.barelyfitz.com/screencast/html-training/css/positioning/]

Absolute, relative & floating elements
[http://www.yourhtmlsource.com/stylesheets/csslayout.html]

Z's not dead baby, Z's not dead
[http://24ways.org/advent/zs-not-dead-baby-zs-not-dead]

An end to absolute positioning
[http://www.medialab.com/wellrounded/userguidefiles/tutorialtwo.html]

Making the absolute, relative
[http://www.stopdesign.com/articles/absolute/]

The "stretchy" layout: liquid, fluid, elastic

You may have heard of the terms liquid, fluid, or elastic in web page design. These terms have become more prominent over the last few years as designers try to reach the variety of audiences - regardless of their monitor size. Layouts that are at a fixed size of only 700px seem very small to those users who have a 21" monitor. How to liquid designs work? Basically the site is programmed so that the divisions are based on a percent value. Naturally there are a variety of ways to approach this type of technique.

Additional layout resources

An overview of current CSS layout techniques
[http://particletree.com/features/an-overview-of-current-css-layout-techniques/]

Liquid layouts the easy way
[http://www.maxdesign.com.au/presentation/liquid/]

Creating liquid layouts with negative margins
[http://www.alistapart.com/articles/negativemargins]

Web page liquidation
[http://www.themaninblue.com/writing/perspective/2003/12/22/]

Faux columns
[http://www.alistapart.com/articles/fauxcolumns/]