1. What is the position?
The position is a CSS property that determines how an element is positioned in a document. Top, right, bottom and left determine the final location of an element.
2. Values of position-
They are five values of positions in CSS.
(i)static
(ii)relative
(iii)fixed
(iv)absolute
(v)Sticky
3. static-
This is the default value of a document which means there are no effects of top, right, bottom, or left properties on this value. The element is positioned as the normal flow of a document.
Syntax-
#cm{
position: static;
}
4. relative-
This value is no effect on the flow of the document like a static value but when we will apply the top, right, bottom, and left properties then it will work. After applying these properties the element changes its position with respect to its original position.
Syntax:
#cm{
position: relative;
top: 60px;
right: 20px;
}
example-
5. absolute-
The element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other properties will work on it. After applying these properties the element changes its position with respect to its parent.
Syntax:
#cm{
position:absolute;
top: 200px;
left: 300px;
}
example:
6. fixed-
The element is removed from the flow of the document like absolutely positioned elements. only fixed-positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.
Syntax:
#cm{
position:fixed;
bottom:10px;
right: 5px;
}
example:
7. sticky-
This value is no effect on the flow of the document like a static value but when we will apply the top, right, bottom, and left properties then it will work until the scroll location of the viewport reaches a specified threshold, at which point the element takes a fixed position where it is told to stick.
Syntax:
#cm{
position:sticky;
bottom:10px;
right: 5px;
}
example:
