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.

demo relative
.demo-relative {
  position: relative; 
  left: 40px; 
  top: 40px;
}
demo sticky
1
scroll down.

2
3
4
5
6
7
8
.demo-sticky {
  position: -webkit-sticky;
  position: sticky;  
  top: 0px;
}
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.