Introduction to Positioning using CSS

Positioning using CSS

With CSS positioning, one can place an element exactly where user wants it on the web page. By applying CSS positioning to the elements, user can control the positioning of the elements.

There are two ways of positioning

• Absolute Positioning
• Relative Positioning

The principal behind CSS Positioning is that you can position any box anywhere in the system of coordinates.

Absolute Positioning :

The absolute positioning defines the exact pixel value where the specified HTML element will appear.

To position an element absolutely, the position property is set as absolute. The Properties left, right, top and bottom can be used to place the text.

To understand see the example below

Programe :

Output :

In the above figure the heading tag is positioned 200px from the top of the document and 150px from the left of the document, and paragraph tag is positioned 75px from the top of the document and 75px from the left of the document.

Relative Positioning :

In the distance from previous element of the web page or offset the box from other element on the web page. To position an element relatively, the property position is set as relative.

The position for an element which is relatively positioned is calculated from the original position in the document. That means that user can move the element to the right, to the left, up or down.

See the example below

Programe :

Output :

In the above example first row of the text normally across the page. The second row, displayed using <p> tag positioned 35 pixels to the right of the element above it.