position property determines which of the positioning algorithms is used to calculate the position of a box.
position property can be used in conjunction with the
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.
These values are explained below.
- The element flows as normal. The
leftproperties don't apply.
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: relativeon table elements is defined as follows:
table-rowoffset 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-columndo not offset the respective column and has no visual affect when
position: relativeis applied.
table-celloffset relative to its normal position within the table. If a table cell spans multiple columns or rows the full spanned cell is offset.
The box's position (and potentionally, its size) is specified with the
leftproperties. 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.
- 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
tableelements, 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
tableelements is the same as for
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.
fixedvalue always creates a new stacking context. When an ancestor has the
transformproperty 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:
- Represents the value specified as the property's initial value.
- Represents the computed value of the property on the element's parent.
- This value acts as either
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.
- Initial Value
- Applies To
- All elements except
- CSS Positioned Layout Module Level 3 (W3C Working Draft)
- CSS Level 2.1 (W3C Recommendation 07 June 2011)