# CSS Basic Position Explanied

# CSS Position property
CSS has a property called `position` that helps us change and move the items we want. There are following main types

- Static position
- Relative position
- Absolute position
- Fixed position
- Sticky position

## Static position
Default position of object is static by default.
when position is set to static it is not affected by top, bottom, left properties.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659627914204/cGrEx24CP.png align="left")

## Relative Position
When this type is set its position becomes relative to its normal position in main container.
we can move it with top, bottom, left and right parameters
but, Setting the top, right, bottom, 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.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659629118693/gVXjQsyI9.png align="left")

in above example box position is moved to bottom but other elements are in their place

## Absolute Position
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659631002048/a9CNKdXCh.png align="left")

## Fixed Position
The element is removed from the normal document flow, and no space is created for the element in the page layout. 

Its final position is determined by the values of top, right, bottom, and left.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659631218774/0vz7490hD.png align="left")

## Sticky Position
The element is positioned according to the normal flow of the document and then behave like fixed positioned element, i.e. sticks to its nearest scrolling ancestor.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659631551458/na4STx_3o.png align="left")