CSS/Properties/position

From W3C Wiki
Jump to: navigation, search

position

The position property specifies the positioning algorithms for elements.

Description

Values static | relative | absolute | fixed | inherit
Initial value static
Applies to All elements
Inherited No


Values

  • static
    The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply.


  • relative
    The box's position is calculated according to the normal flow. Plus, the 'top', 'right', 'bottom', and 'left' properties apply.


  • absolute
    The box is taken out of the normal flow. The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties.


  • fixed
    According to the 'absolute' model, the box is taken out of the normal flow but does not move when scrolled. The box's position is specified with the 'top', 'right', 'bottom', and 'left' properties.


  • inherit
    Takes the same specified value as the property for the element's parent.

Example

Example A

[style.css]

 h1{
   position: absolute;
   top: 100px;
   left: 50px;
}

[index.html]

<body>
  <h1>position property</h1>
  <p>This is a paragraph.</p>
</body>

Csslist2 position.png

CSS Reference

The CSS specification defines the position property in 9.3.1 Choosing a positioning scheme.