position (CSS property)

Description

The position property, together with the float property, controls the way in which the position of the element’s generated box is computed. See Positioning for details about element positioning.

Boxes with a position value other than static are said to be positioned. Their vertical placement in the stacking context is determined by the z-index property.

Value

    absolute
    The value absolute generates an absolutely positioned box that’s positioned relative to its containing block. The position can be specified using one or more of the properties top, right, bottom, and left. Absolutely positioned boxes are removed from the flow and have no effect on later siblings. Margins on absolutely positioned boxes never collapse with margins on other boxes.

    fixed
    The value fixed generates an absolutely positioned box that’s positioned relative to the initial containing block (normally the viewport). The position can be specified using one or more of the properties top, right, bottom, and left. In the print media type, the element is rendered on every page.

    relative
    The value relative generates a positioned box whose position is first computed as for the normal flow. The generated box is then offset from this position according to the properties top or bottom and/or left or right. The position of the following box is computed as if the relatively positioned box occupied the position that was computed before the box was offset. This value cannot be used for table cells, columns, column groups, rows, row groups, or captions.

    static
    The value static generates a box that isn’t positioned, but occurs in the normal flow. The properties top, right, bottom, left, and z-index are ignored for static boxes.

    inherit
    The value inherit causes the element to take the same computed value as its parent (see The CSS Property Value inherit) for more information.

Learn HTML5 Online

Get all SitePoint books and courses with a Learnable membership. Start building future-proof websites that are faster, more powerful, and easier to maintain.

No Reader comments

Comments on this post are closed.