CSS POSITION

This property determines whether normal, relative or absolute positioning methods are used to render the current element box.

Example
1
2
3
4
5
6
7
8
h2 {
  display: block;
  position: absolute;
  top: 20px;
  right: 50px;
  bottom: 20px;
  left: 50px
}
1
2
<h2 style="display: block; position: absolute; top: 20px;
right: 50px; bottom: 20px; left: 50px">text</h2>

Possible Values

inherit: Explicitly sets the value of this property to that of the parent.

static: This is the default positioning scheme, where elements are rendered in order, as they appear in the document flow. The ‘top’, ‘left’, ‘right’ and ‘bottom’ properties have no effect if this value is set.

relative: The element’s normal document flow position is calculated as if the element had a ‘position’ value of ‘static’. It is then offset from this position according to the ‘top’ and ‘left’ properties. Any elements that come after this element will be laid out as if the element had not been offset (a phantom height and width for the element is reserved in the normal document flow.)

absolute: This specifies that the element box be absolutely positioned using the ‘top’, ‘left’, ‘right’ and ‘bottom’ properties. These values use the element box’s containing block as origin. Absolutely positioned elements do NOT exist in the normal document flow like relatively positioned elements are – elements that follow will flow as if the absolutely positioned element does not exist.

fixed: This value behaves like ‘absolute’ in all respects, but additionally, the positioned element box is fixed with respect to a reference point. In scrolling media, it is in reference to some fixed point on the screen; in paged media (printing) it will be in reference to a point on the page. The positioned element will not move with respect to that stationary point (eg, it will not moved when, say, the screen is scrolled.)