Position Static

HTML elements are positioned static by default.

The element is positioned according to the normal flow of the document, that means that follows other elements in the document flow, as typed in html.

Static positioned elements are not affected by the top, bottom, left, right and z-index properties.

                        
#container {
    position: static;
}
Position Relative

Relative positioning changes the position of the HTML element relative to where it normally would be in document flow if the position is set to static. It is removed from normal document flow, but position in the document flow is still reserved. The offset does not affect the position of any other elements.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.

                        
#container {
    position: relative;
    left: 15px;
}
Position Absolute

An element positioned absolute is relative to the nearest positioned ancestor. If it has no positioned ancestors, it uses the document body, and moves along with page scrolling.

The element is removed from the normal document flow, and no space is created for the element in the page layout. It can overlap elements.

Its final position is determined by the values of top, right, bottom and left (the distances from the element’s edges to its corresponding containing block's edges).

                        
#parent-container {
    position: relative;
}

#child-container {
    position: absolute;
    top: 50px;
}
Position Fixed

The element is removed from the normal document flow. No space is created for the element in the page layout.

It is positioned relative to the viewport, stays in the same place when scrolled, therefore fixed position is good for navigation bars.

Its final position is determined by the values of top, right, bottom, and left.

                        
#nav-bar {
    position: fixed;
    top: 60px;
    left: 0px;
    z-index: 1;
}

If printed, a fixed element will be repeated on each printed page.


Position Sticky

Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent.

A common use for sticky positioning is for the headings in an alphabetized list. The "B" heading will appear just below the items that begin with "A" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the "B" heading will then remain fixed to the top of the viewport until all the "B" items have scrolled offscreen, at which point it will be covered up by the "C" heading, and so on.

At least one of top, right, bottom or left must be specified for sticky positioning to work.

Not all browsers support sticky positioning. This helps:

                        
#container {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 0px;
}

Click here for an example page of sticky positioning.