Positioning is used to get the blocks exactly where you want them to go. The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big. Elements can be positioned using the properties like top, bottom, left, right. There are basically four types of positioning:
Static: This is the default positioning for every html element. Static means the element will flow into the page as it normally does. A static positioned element is always positioned according to the normal flow of the page. The elements of static positioning are not affected by the top, bottom, left and right properties.
Relative: Relative positioning means "relative to itself". The content of relatively positioned elements can move and overlap other elements, but the reserved space for the element is still preserved in the normal flow. A relative positioned element is positioned relative to its normal position.
Absolute: This is very important positioning that allows you to place any html element exactly where you want it. An element with this type of positioning is not affected by other elements and it also doesn't affect other elements. Absolutely positioned elements can overlap other elements. Here the element is positioned relative to first parent element that has a position other than static. If no such element is found, the containing block inherits the html tag. You can use the left, right, top and bottom properties to move the element anywhere on the page.
Fixed: A fixed position element is positioned relative to the browser window itself or the viewport. The viewport doesn't change even when the window is scrolled, so an element with fixed positioning will stay exactly where it is when the page is scrolled. Fixed positioned elements can overlap other elements.
For More Blogs Kindly visit http://findnerd.com/NerdDigest
No comments:
Post a Comment