Home Advertise with us Forum Articles Sitemap Contact
Logo  

HTML Codes and Tags

Positioning of the elements is an important consideration in CSS. The CSS positioning property is used to set the exact position of the HTML element. Not only this, using this property it is also possible to place an element behind another.

Proper positioning of elements gives you a scope to create a precise & advanced layout. Positioning of the HTML elements can be done using the left, right, top & bottom properties. There are four different methods that can be used for positioning:

Static (default) Positioning : By default the HTML elements are positioned static. An element placed in this manner is always positioned as per the normal page flow. Elements in static position are unaffected by the left, right, top & bottom properties.

Fixed Positioning : - This position places an HTML element relative to the actual browser window. The element remains at the fixed position even when the page is scrolled.

Example: p.pos_fixed {position: fixed; top: 30px; right: 5px;}


Absolute Positioning: In this case the elements are placed in relation to the first parent element, in the absence of which the containing block is . Here the element’s position moves as the page is scrolled along with the rest of the content.

Example: h2 {position: absolute; left: 100px; top: 150px;}


Relative Positioning : In this position, the HTML element is positioned in relation to its default position. Elements positioned in this way can be moved & even overlap other elements.

Example: h2.pos_top {position: relative; top: 50px;}