Position
The position property allows to control position of HTML elements.
The top, right, bottom and left properties determine the final location of positioned elements.
Below list of values of the position property.
| value | description |
|---|---|
| static | Element will be positioned according to the normal flow of the page. The top, right, bottom and left and z-index properties have no effect. This is default value. |
| relative | Element will be positioned according to the normal flow of the page. Then top, right, bottom and left offsets will be applied. |
| absolute | 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. |
| fixed | 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 the viewport, which means it always stays in the same place even if the page is scrolled. |
|
sticky -webkit-sticky |
Element is positioned based on the user's scroll position. Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned. |
demo relative
.demo-relative {
position: relative;
left: 40px;
top: 40px;
}demo sticky
1
scroll down.
2
3
4
5
6
7
8
scroll down.
2
3
4
5
6
7
8
.demo-sticky {
position: -webkit-sticky;
position: sticky;
top: 0px;
}