Wednesday, 15 October 2014

Previous Interview Question Next Interview Question
Home

CSS "Position" Property Clear Explanation

Values for position: static, relative, absolute, fixed, inherit

position : static


static is the default value. An element with position: static; is not positioned in any special way. A static element is said to be not positioned and an element with its position set to anything else is said to be positioned.



position : relative


relative behaves the same as static unless you add some extra properties.


Setting the toprightbottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.



position : absolute



absolute is the trickiest position value. absolute behaves like fixed except relative tothe nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a "positioned" element is one whose position is anything except static.
This element is relatively-positioned. If this element was position: static; its absolutely-positioned child would escape and would be positioned relative to the document body.



The DOM Element is removed from the normal page flow, and you can set exact vertical and horizontal position of the absolute element relative to the element it is inside.
Additionally, the absolute element's contents will scroll vertically (and/or horizontally) like normal HTML page contents do.


position : fixed

A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. As with relative, the toprightbottom, and left properties are used.

The DOM Element is removed from the normal page flow, and you can set exact vertical and horizontal position of the element relative to the browser window.
Additionally, the fixed element's contents will NOT scroll away like normal HTML page contents do, they will stay in their current position in the browser window.
Fixed positioning was not supported by IE until version 7.

Previous Interview Question Next Interview Question
Home

0 comments :

Post a Comment