The Position attribute defines the positioning mechanism used to establish the layout of elements. Any element can be positioned, but absolutely or pinning an element will produce a block-level box, regardless of the element's type; relatively positioning an element will be offset from its default position in normal document flow.
Position element generally has five attributes, which are:
1.absolute(generate an absolutely positioned element, positioned relative to the first parent element other than static positioning. The position of the element is set through top, left, right, bottom.)
2.fixed (generates absolutely positioned elements, which is different from absolute. Fixed is positioned relative to the browser window. The position setting method of the element is the same as absolute.)
3.relative(Generates relatively positioned elements, positioned relative to the browser window. Therefore, "left:20px;" will add 20 pixels to the left position of the element.)
4.static (the default value of the position element, no positioning, so this element will appear in the normal document flow)
5.inherit (Set the value of the position attribute that should be inherited from the parent element.)
Below we list some example codes for various attributes:
1.absolute attribute
With absolute positioning, elements can be placed anywhere on the page. The title below is positioned 100px from the left side of the page and 150px from the top of the page.
2.relative attribute()
Relative positioning will move the element according to its original position.
Style "left:-20px" subtracts 20 pixels from the element's original left position.
Style "left:20px" adds 20 pixels to the element's original left position.
3.fixed attribute
