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


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


This is relative positioning with CSS.

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.


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


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).


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


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.