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...
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.
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:
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.
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:
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 allows you to position elements based upon their relative position from other elements. Let's take a look:
The above style will position the element relatively 40px from the top and 20 px from the left of where it would normally reside.
Learn CSS Positioning in Ten Steps
Absolute, relative & floating elements
Z's not dead baby, Z's not dead
An end to absolute positioning
Making the absolute, relative
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.
An overview of current CSS layout techniques
Liquid layouts the easy way
Creating liquid layouts with negative margins
Web page liquidation