Here we can see one of the important properties(position) in css.
Position: it specifies the different positioning methods of an element. "top, bottom, right and left" properties decide the final location of the positioned element.
different methods of position:
- static
- relative
- absolute
- fixed
- sticky
position:static it is the default value. top, bottom, right, left properties won't affect this static position. The element's position depends on the normal flow of the document.
syntax: element { position:static }
exmple
position:relative The element's position is relative to its original position and based on the value of "top, bottom, left, right" propetries its final location is determined. Other elements and contents in the document won't get affected because of its position.
syntax: element { position:relative ; top: ;left: ;bottom: ;right: ; }
example
position:absolute The element's position is relative to its nearest positioned ancestor. If there is no nearest positioned ancestor ,it will use its initial containing block . The value of "top, bottom, left, right" properties determines the element's final position.
syntax: element { position:absolute; top: ;left: ;bottom: ;right: ; }
example
position: fixed Here the positioning of a element depends on the view port.it is removed from the normal flow of the document. The element's position is fixed and not affected when the page is scrolled , shrinked etc. the final position is decided by the value of "top, bottom, left, right" properties.
syntax: element { position:fixed; top: ;left: ;bottom: ;right: ; }
example
position: sticky The element's position is according to the normal flow of the document. And then based on the value of "top, bottom, left, right" properties it is relative to the nearest scrolling and block level ancestor. the sticky position won't affect the other elements and contents in the document
syntax: element { position:sticky; top: ;left: ;bottom: ;right: ; }
example
