CSS position

<!doctype html>
<title>Example</title>
<style>
div {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid orange;
  position: relative;
  top: 70px;
  left: 120px;
  }
</style>
<div class="inner">This 'div' is positioned using the CSS position property. Try changing the values to see the effect it has on the position of the div.</div>

The CSS position property determines which of the positioning algorithms is used to calculate the position of a box.

The position property can be used in conjunction with the top, right, bottom, and left properties to position an element where you want it.

You can use the position property to make an element's position static, relative, absolute, fixed, or sticky. See below for an explanation on these.

Syntax

These values are explained below.

Possible Values

static

The element flows as normal. The top, right, bottom, and left properties don't apply.

relative

The box's position is calculated according to the normal flow. Then the box is offset relative to its normal position and in all cases, including table elements, does not affect the position of any following boxes. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of position: relative on table elements is defined as follows:

table-row-group, table-header-group, table-footer-group and table-row offset relative to its normal position within the table. If table-cells span multiple rows, only the cells originating in the relative positioned row is offset.
table-column-group, table-column do not offset the respective column and has no visual affect when position: relative is applied.
table-caption and table-cell offset relative to its normal position within the table. If a table cell spans multiple columns or rows the full spanned cell is offset.

absolute

The box's position (and potentionally, its size) is specified with the top, right, bottom, and left properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Though absolutely positioned boxes may have margins, those margins do not collapse with any other margins.

sticky

The box's position is calculated according to the normal flow. Then the box is offset relative to its flow root and containing block and in all cases, including table elements, does not affect the position of any following boxes. When a box B is stickily positioned, the position of the following box is calculated as though B were not offset. The effect of position: sticky on table elements is the same as for position: relative.

fixed

Similar to absolute, but also doesn't move when scrolled. The box is in a fixed position that doesn't scroll with the rest of the content. When using the print media type, the box is rendered on every page.

The fixed value always creates a new stacking context. When an ancestor has the transform property set to a value other than none, then the ancestor is used as a containing block.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial: Represents the value specified as the property's initial value.
inherit: Represents the computed value of the property on the element's parent.
unset: This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Web.QHMIT.com

CSS position

Syntax

Possible Values

General Information

Example Code

Official Specifications