CSS Position property is used to define the position of the HTML elements on a web page. By default all the HTML elements are located in a page in a flow. If you are using the block elements like paragraph, headers or tables are positioned from top to bottom one after another. If you are using the inline elements like Bold <B> or Italics <I> the position value is applied from left to right.
Syntax of the CSS property is
{POSITION: ABSOLUTE|FIXED|RELATIVE|STATIC}
To place the block and inline elements at your desired position in the web page the following CSS position values can be applied for the property.
CSS Position Values
ABSOLUTE
This value of the POSITION property places an HTML element within another element. The absolute position is always defined with respect to the top left corner of the container or parent element. The parent or container element must be defined with relative or fixed position value. In case the HTML is not included in another HTML element, then the absolute position is taken relative to the Browser window.
FIXED
This CSS Position property value positions an HTML element at the specified position with respect to the browser window. An element whose position is defined with FIXED value will not scroll when user scrolls up or down a page. You have to give the top and left values for such an element defining the box offset values.
RELATIVE
This value places the HTML elements in normal flow by offsetting them with respect to the box of the other elements near it. If you want the HTML elements of a page to overlap each other then you can do so by setting CSS Position as relative and setting the top and left values of this element.
STATIC
This is the default value of the CSS Position property. It allows the HTML elements to position as per their sequence in the HTML code. It is the normal flow of the page elements.
Example
In this example one block element <P> and two inline elements <B> and <I> are stylized with CSS. The CSS position property is set to relative, absolute and fixed respectively for these three HTML tags. <B> and <I> tags are used within <P> tag which becomes container for these two. You can see that effect of relative is relative to the container and effect of fixed is relative to the page. The effect of absolute is with respect to the container <P> using the top and left values defined for <B> tag.
<HTML> <STYLE> p { background-color: blue; width:200px; border:1px dotted red; position:relative; } b { width:150%; background-color:green; top:20px; left:20px; position:absolute; } i { width:50%; background-color:yellow; top:100px; left:40px; position:fixed; } </STYLE> <BODY > <P> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <B>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</B> <I> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software</I> like Aldus PageMaker including versions of Lorem Ipsum. </P> </BODY> </HTML>