Css positions:
Here is the short explanation of css positions,there are five positions we can apply to style the page that defines the position of an element in a document,along with these positions the values of top, right, bottom, and left determine the element's final position.
Types of positions:
- Static
- Relative
- Absolute
- Fixed
- Sticky.
1)static position:
This will be default position. It always positions an element according to the normal flow of the page. It is not affected by the top, bottom, left and right properties.
div{
position:static;
}
2)Relative position:
The position of this is relative to the parent container. it will flow according to parent container.
div1{
position:relative;
top:20px;
left:20px;
}
3)Absolute position:
The absolute positioning is used to position an element relative to the first parent element that has a position other than static. If no such element is found, the containing block is HTML.
containerparent1{
position:relative;
}
container{
position:absolute;
top:10px;
left:10px;
}
4)Fixed position:
Fixed positioning allows you to fix the position of an element to a particular spot on the page, regardless of scrolling. Specified coordinates will be relative to the browser window.
div{
position:fixed;
top:100px;
left:100px;
5)Sticky position:
Similar to fixed positioning, sticky positioning allows you to fix the position of an element to a particular spot on the page, regardless of scrolling. Specified coordinates will be relative to the parent container. Depends upon the scroll position, a sticky element toggles in between fixed and relative.
div{
position:sticky;
top:100px;
left:100px;
```