position

div.test { position: static;}
div.test1 { position: relative;}
div.test2 { position: absolute;}

Value	Description
static	Positions the element according to the normal document flow. The 'top', 'right', 'bottom', and 'left' properties have no effect. This is the initial value.
relative	Positions the element relative to its normal position in the document flow. The space the element would have occupied in the normal flow is preserved. When this value is specified, the 'top', 'right', 'bottom', and 'left' properties specify the offset from the element's normal position.
absolute	Positions the element relative to the nearest ancestor whose 'position' is not 'static'. If no such ancestor exists, it is positioned relative to the window. The space the element would have occupied in the normal flow is not preserved. When this value is specified, the 'top', 'right', 'bottom', and 'left' properties specify the distance from each edge of the containing block.
fixed	Positions the element relative to the window. The position remains fixed even when scrolling. The space the element would have occupied in the normal flow is not preserved. When this value is specified, the 'top', 'right', 'bottom', and 'left' properties specify the distance from each edge of the window.

The elements with 'position' specified below have 'opacity: 0.7' applied to make them semi-transparent.

<div style="position: static; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">This is a div element with a width of 300px and height of 300px. 'position: static' is specified.</div>
<p style="background-color: #0f9">This is a p element.</p>

<div style="position: relative; top: 0; left: 50px; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">This is a div element with a width of 300px and height of 300px. 'position: relative', 'top: 0', and 'left: 50px' are specified.</div>
<p style="background-color: #0f9">This is a p element. The preceding element with 'position: relative' retains its space in the normal document flow even when moved, so this p element is displayed in its original position without being shifted.</p>

<div style="position: absolute; top: 0; left: 50px; background-color: #ff0; width: 300px; height: 100px; padding-top: 200px; opacity: 0.7;">This is a div element with a width of 300px and height of 300px. 'position: absolute', 'top: 0', and 'left: 50px' are specified.</div>
<p style="background-color: #0f9">This is a p element. The space the preceding element with 'position: absolute' would have occupied is not preserved, so this p element is shifted up to fill the gap.</p>

For a sample of 'position: fixed', see here.

※ Version data is based on MDN.

Changes the positioning method of an element.

When 'static' is specified, the element is placed according to the normal document flow. The 'top', 'right', 'bottom', and 'left' properties are all ignored. This is the initial value.

When 'relative' is specified, the element can be positioned relative to its normal position in the document flow. The 'top', 'right', 'bottom', and 'left' properties specify the offset from the element's normal position. The space that would have been occupied by the 'relative' element in the normal flow is preserved, so subsequent elements are displayed in their original positions without being shifted.

<div style="position: relative; top: 100px; left: 50px; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">This is a div element with a width of 300px and height of 300px. 'position: relative', 'top: 100px', and 'left: 50px' are specified.</div>
<p style="background-color: #0f9">This is a p element. The preceding element with 'position: relative' retains its space in the normal document flow even when moved, so this p element is displayed in its original position without being shifted.</p>

When 'absolute' is specified and an ancestor element with a 'position' value other than 'static' exists, the element is positioned relative to the nearest such ancestor. If all ancestors have 'position: static', the element is positioned relative to the window. The 'top', 'right', 'bottom', and 'left' properties specify the distance from each edge of the containing block. The space that would have been occupied by the 'absolute' element in the normal flow is not preserved, so subsequent elements shift up to fill the gap.

<div style="position: absolute; top: 0; left: 50px; background-color: #ff0; width: 300px; height: 100px; padding-top: 200px; opacity: 0.7;">This is a div element with a width of 300px and height of 300px. 'position: absolute', 'top: 0', and 'left: 50px' are specified.</div>
<p style="background-color: #0f9">This is a p element. The space the preceding element with 'position: absolute' would have occupied is not preserved, so this p element is shifted up to fill the gap.</p>

When 'fixed' is specified, the element is positioned relative to the top-left corner of the window. It stays fixed even when scrolling. The 'top', 'right', 'bottom', and 'left' properties specify the distance from each edge of the window. The space that would have been occupied by the 'fixed' element in the normal flow is not preserved, so subsequent elements shift up to fill the gap.

For a sample of 'position: fixed', see here.

When child elements with 'position: absolute' or 'fixed' exist, the parent element cannot include their height in its own height calculation. This is because elements with 'position: absolute' or 'fixed' are completely removed from the normal document flow. To have the parent automatically calculate this height, use JavaScript.

Also note that 'margin' collapsing does not occur for elements with 'position: absolute' or 'fixed'.

※ The 'position' property is also explained in detail here.