CSS Element Positioning

You can position elements in CSS by using the position property. It accepts these values:

• Static (default)
• Relative (specify the element’s position by using top, left, right, bottom properties)
• Fixed (element is fixed in that location, it will stay in that location even if the window is scrolled so it will follow)
• Absolute (specify the element’s position by using top, left, right, bottom properties)

Element Positioning – Relative

Example

div.cssElementPosRel{border:2px solid #333;width:50%;position:relative;top:5px;left:25px;}

Output

Element Positioning  – Fixed

div {position:fixed;}

Element positioning can be tricky at times, so it may not be frequently used. Only a couple of examples are given here as it may interfere with the site design, and element positioning will display different in other browsers. So you can see, it can be quite difficult to use.

Element Positioning – Floating

Another element positioning is known as floating, which will float an element left or right.

Example

div_one {width:30%; float:left;background-color:#000;}
div_two {width:30%; float:right;background-color:#B1BA04;}

Output

Element Positioning – Clear

The clear property will make sure there is no element floating to the right or left of the element (usually a paragraph or div tag).

Example

div_one {width:30%; float:left;background-color:#000;}
div_two {width:30%; float:right;background-color:#B1BA04;clear:both;}

Output

You can see how the right div has moved down. Clear property is very useful for the footer, as it will keep it in one place with no surrounding elements.