# Positions in CSS.!

Position

•             The position sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

•             there are mainly five types of positions in a document

•             static

•             relative

•             absolute

•             fixed

•             sticky

static

•             This is the default value.

•             The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect.

Syntax: position: static;

relative

•             It will not affect the normal document flow.

•             It looks quite similar to normal document flow. We can move/displace our element with respect to its parent element.

Syntax: position: relative;

absolute

•             in absolute position element will be positioned relative to closest positionde ancestor

•             It will not always visible to viewport. (not scroll with the page) It removes the element from its normal document flow.

•             It displace the element with respect to the window of browser if its parent position is set to static.

Syntax: position: absolute;

fixed

•             When we use position:fixed it will move our element out of the normal document flow.

•             But element will be placed according/relative to the window of browser , no matter where parent element is. It will always visible on the viewport.(scroll with the page)

Syntax: position: fixed;

stickey

•             Element will act like they have static position when scrolling until they hit the top , left , right , bottom value.

•             After hitting that position it will scroll down but placing that element like position:fixed .

Syntax: position: sticky;