position

Summary

The position property controls the type of positioning used by an element within its parent elements. The effect of the position property depends on a lot of factors, for example the position property of parent elements.

Overview table

Initial value: static
Applies to: All elements
Inherited: No
Media: visual
Computed value: As specified
Animatable: No
CSS Object Model Property: position

Syntax

position: absolute
position: fixed
position: inherit
position: relative
position: static

Values

static: Default. Object has no special positioning; it follows the layout rules of HTML. Values of top, bottom, left and right have no impact.
absolute: Object is positioned relative to nearest positioned ancestor—or to the initial containing block if no positioned ancestor exists—using the top and left properties.
relative: Object is positioned according to the normal flow, and then offset by the top and left properties.
fixed: Object is positioned relative to the viewport containing the content. Object stays in the viewport when scrolling. Usually used for navigation on mobile devices. Limited support.
inherit: Inherits the value of the parent element.

Examples

The example shows how a child element’s position depends on the position value of its parent, as well as its own position value.

<section class="parent static">
    <div class="child absolute">
        <p>absolute</p>
    </div>
    <p>static</p>
</section>

<section class="parent static">
    <div class="child static">
        <p>static</p>
    </div>
    <p>static</p>
</section>

<section class="parent static">
    <div class="child relative">
        <p>relative</p>
    </div>
    <p>static</p>
</section>

<section class="parent relative">
    <div class="child absolute">
        <p>absolute</p>
    </div>
    <p>relative</p>
</section>

View live example

Watch how the child positions itself relative to the parent, depending on the value of position for both elements.

.static {
    position: static;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.child {
    top: 30px;
    left: 20px;

    background-color: #ff3856;
    width: 100px;
    height: 100px;
}

.parent {
    background-color: #6acc18;
    margin: 80px;
    width: 160px;
    height: 160px;
}

A typical navigation menu with position: fixed.

<nav class="nav nav-fixed">
    <a href="#">Home</a>
    <a href="#">Something</a>
    <a href="#">Contact</a>
</nav>

<section class="long-scrollable"></section>

View live example

While the .long-scrollable section is scrolled down, the .nav-fixed stays fixed at the top of the viewport.

.long-scrollable {
    border: 2px dotted #999;
    height: 2000px;
}

.nav {
    background-color: #000;
    color: #fff;
    width: 100%;
    height: 40px;
}

.nav-fixed {
    position: fixed;
}

Usage

 ===Static (Default)===

The element is laid out according to normal HTML flow.

Relative

Setting the property to relative places the object in the natural HTML flow of the document, but offsets the position of the object from its normal position. The following syntax shows how to create superscript text by placing the text in a span that is positioned relative to its original position.

<p>The superscript in this name
    <span style="position: relative; top: -3px">xyz</span>
    is "xyz".</p>

The superscript in this name xyz is "xyz".

Text and objects that follow a relatively positioned object occupy their own space and do not overlap the natural space for the positioned object. In contrast, text and objects that follow an absolutely positioned object occupy what would have been the natural space for the positioned object before it was pulled out of the flow. Placing an absolutely positioned object beyond the viewable area of the window causes a scroll bar to appear. When relatively positioned objects are placed beyond the viewable area, a scroll bar is not shown. The size of the content determines the size of objects with layout. For example, setting the height and position properties on a div object gives it layout. The content of the div determines the size. In this case, the content determines the size of the width.

Absolute

Setting the property to absolute pulls the object out of the “flow” of the document and positions it regardless of the layout of surrounding objects. If other objects already occupy the given position, they do not affect the positioned object, nor does the positioned object affect them. Instead, all objects are drawn at the same place, causing the objects to overlap. (This overlap is controlled by using the z-index property.)

Absolutely positioned elements are positioned relative to their containing blocks. The containing block for an absolutely positioned element is formed by the padding edge of the element’s nearest positioned ancestor-- the closest parent element that has a position value of relative, absolute, or fixed. If no positioned ancestor exists, the containing block is the initial containing block-- the viewport or the page box.

The edges of the element can be specified relative to the edges of the containing block by using the top, bottom, left and right properties.

Absolutely positioned objects do not have margins, but they do have borders and padding.

Side Note

Input from pointing devices, such as the mouse, does not penetrate through overlapping elements even if the elements are not visible. This is also true for positioned elements with a negative z-index unless:

The parent is a scrolling container (that is, its overflow property is set to auto or scroll).
The parent is positioned (that is, its position property is set to absolute or relative).

Fixed

An element with a fixed position is positioned relative to the visible viewport. It does not move away if the browser window is scrolled but appears to be fixed in the viewport. A common pattern and example is to use position: fixed on navigation elements that should be visible on the whole page regardless of the scrollbar position. Fixed positioning is only supported for pages using a strict <!DOCTYPE> directive.

Notes

Layout Float

static The positioned float is laid out according to normal HTML flow.

absolute The positioned float is laid out relative to its containing block, but the positioned float will affect the normal flow of its container. Inline content wraps around the positioned float; the positioned float is not laid out on top of inline content.

relative The positioned float is laid out relative to where it would fall in the normal flow. The bottom, top, left, and right properties can be used to calculate an offset from the element’s position in the normal flow. Content will flow around the original position of the element, and the actual positioned float will be superimposed on top of inline content.

fixed The positioned float is laid out relative to the initial position of the viewport, or browser window. (The positioned float’s position is not updated as the viewport moves due to scrolling.)

Related specifications

CSS 2.1: W3C Recommendation

Attributions

Mozilla Developer Network : Article
Microsoft Developer Network: [Windows Internet Explorer API reference Article]