Table of contents
What is Position
The position CSS property 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 5 types of positions in CSS
- Static
- Relative
- Absolute
- Fixed
- Sticky
1. Static
The element is positioned according to the normal flow of the document. top, right, bottom, and left properties have no effect. This is the default value.
syntax:
position: static;
Code:
2. Relative
The element is positioned according to the normal flow of the document based on the values of top, right, bottom, and left.
syntax:
position: relative;
Code:
3. Absolute
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.
syntax:
position: absolute;
Code:
4. Fixed
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. It has no effect on scrolling.
syntax:
position: fixed;
Code:
5. Sticky
The element is positioned according to the normal flow of the document, element position is based on the values of top, right, bottom, and left. The element will act like they have a static position when scrolling until they hit the top, left, right, and bottom values.
syntax:
position: sticky;
Code: