Positioning

One of the huge advantages that CSS has compared to HTML is the control of where you can place elements. With HTML, you have to use tables to similar elements to get a site look the way that you would like. With CSS, you do not have to do this, because of the position attribute.

The position attribute can have four values applied to it. Those values are static, relative, absolute, and fixed. After declaring the value, then you can set where you want the element to be positioned on the page.

Static

Static is the default value for position attribute. This value ignores any top, bottom, left, or right values assigned to it.

Relative

To change the position of an element relative to its normal position in the page, you would use this value.

Absolute

This value will change the position of the element based on the parent element's position.

Fixed

Fixed will assign the position on the page, no matter what size the web browser window is. If the page is scrolled and element with a fixed position will stay in that position.

Top, Bottom, Left, and Right

Along with the position attribute, it is most likely that top, bottom, left, and right attributes are going to be used also. These will allow you to actually do the positioning of the element. It is best that when assigning a value to these attributes to use percentage instead of a fixed value. The reason behind this is two fold. One, if the user has a different screen resolution, then the site will look different on their screen. Second, if the browser is re-sized, then the page is also re-sized to fit properly inside the browser.

Z-Index

Another attribute you can use to control how elements are positioned on your site is with the z-index attribute. The z-index attribute allow you to "layer" the elements on your page. A z-index value only effects elements that have positions values assigned to them. When using z-index, you can use both positive and negative numbers, with zero being the default value. If needing to put an element behind another element the z-index value would be -1, assuming the first object has a z-index of zero.