Positioning A HTML Element

Any HTML element can have 4 types of positioning:

• Static – Default position of any element. Means it is in default document flow.

• Relative – If it is a parent for any absolute positioned element inside, then that element will take its position according to it (The relative element). If given left / top / right / bottom to the relative positioned element, it take position from its default place and default place remains blank as we just shifted the element from its original place.

• Absolute – It gets out of the document flow, means no blank space is left for it and it appears on top of all other elements which are in document flow and not having z-index ^1. It took its place as per the nearest position:relative parent or position:absolute parent or position:fixed parent.

• Fixed – It took its place according to the monitor/screen regardless the normal document flow.

Positioning An Element

Notes:

• So Position Static and relative are treated in document flow and they reserve a space for them and Absolute and Fixed positioned elements are treated as outside the normal page flow.

• Fixed Elements can be placed anywhere in the whole HTML page, but better to put them in bottom, because they normally load on some click event so can be load after full page rendering and they took position above all other elements so placing bottom is good.

• Absolute positioned elements can be placed in bottom of their position:relative container.

• To align it(Absolute and Fixed) anywhere we give left or right value in px to align it from left or right respectively. And we give top or bottom value in px to align it from top or bottom of its container/screen. Defaultly it takes top:0 and left: center. But IE7 takes it left:0 so better to define exact position of it.

• If we need an element with same width and height as its container have, then a better way is to define it like position:absolute; top:0; left:0; right:0; bottom:0; But IE7 will only take its top:0 and left:0 and won’t read right and bottom position. So we need to give it width:100%; height:100%; So no scope to put padding on it directly.

• To override left and top values and re-define the position from right and bottom, we use auto as its value.

Like,

left:auto; top:auto; bottom:xx px; right: xx px;

• z-index only works with Relative, Fixed and Absolute positioned elements.

• In a stack of positioned(Relative, Fixed and Absolute) elements, the higher the z-index is the more top the element will be. Values supported are -1, 0 to 9999 only.

• To send positioned(Relative, Fixed and Absolute) element behind all data/elements in document use z-index:-1 on it.

• To remove Position absolute or fixed element’s effect and to take it again in document flow use: position:static.

• Position:relative element never moves anywhere if we are not using top/left/right/bottom with it. So in making parent position:relative (so the child can use position:absolute value and a position with left/right/top/bottom) creates no issues.

• To position element horizontally and vertically center, we also use position, for more details about it, check out : Centering an element Horizontally & Vertically (Should be linked with that.. internal page link)

• Position fixed elements should be avoided in iPad/iPhones/mobiles because it slow down the scroll speed and create jerk in positioning.

^1: Apart from position:static elements all have z-index values. So if a position:relative parent is coming above the other positioned container in HTML then its child position:absolute element will also have a lesser z-index than its next parent container and it will get hide behind below positioned container. To take it in top we have to increase z-index of its parent. And in IE7 and below we always have to define its parent container’s (Which is sibling to next container) z-index. And as above statements tell z-index is not supported with static position. So we have to change its position to relative.