Position

{ position: }

The default way elements are positioned is to be stacked like blocks. In this default position elements are static (which is actually the name of the default position) and they can't be moved. In order to move/reposition an element you have to change its position property. The position values are: relative, absolute, and fixed. For now we're just going to focus on relative and absolute because fixed isn't used very often. Once an element has been given a position of relative or absolute, it can then be repositoned on the page. You can set the vertical or top position and the horizontal or left position. The position can be set in number of pixels from the top or from the left that you want to move the element. By default the element's position is set to the top, left corner with a top and left position of 0px. Change the position property and the top and left values to see how the element is repositioned.

One

HTML

<div> One </div>

CSS

div {

position:
;

top:
px ;

left:
px ;


}


You can also position an element vertically from the bottom or horizontally from the right as well. However, you can only do this with an element's position set to absolute or fixed. With absolute and fixed positioned elements you can position an element from the top, bottom, left or right. With relative positioned elements you can only position from the top and left.