In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > position

position property

Browser support:

Specifies what type of positioning method is used to render the current element.

The default positioning is static, in which case elements are rendered in the order they appear in the document flow. The left, top, right and bottom style properties have no effect on static elements, their width and height can be modified.

Relative positioning is similar to static positioning, but the placement of relative positioned elements can be modified with the left, top, right and bottom style properties. In this case, the values of the left, top, right and bottom style properties are relative to the element's normal flow (static) position.

There are two other positioning methods that are often used, the absolute and the fixed. The left, top, right and bottom style properties affect both absolute and fixed positioned elements similarly to relative positioned elements, but the placement of references are different.
The placement of fixed positioned elements is always relative to the browser window's client area, so scrolling the document or an element in the document does not modify the placement of fixed positioned elements.
The placement of an absolute positioned element is relative to its first positioned (relative, fixed or absolute) ancestor element. If no positioned parent element exists, the placement is relative to the document. In contrast to fixed positioning, scrolling affects absolute positioning.

JavaScript page for this property: position. You can find other example(s) there.

Possible values:

One of the following values:

absolute

The element is positioned relative to its first positioned (relative, fixed or absolute) ancestor element.

fixed

7

The element is positioned relative to the browser window's client area.

inherit

Takes the value of this property from the computed style of the parent element.

relative

The element is offset relative to its normal flow (static) position.

static

Default. Elements are rendered in order, as they appear in the document flow.

Default: static.

Internet Explorer does not support fixed position before version 7.
In Internet Explorer 7, fixed position is only supported in STRICT and XHTML document type declarations.
From Internet Explorer 8, fixed position is supported in all document type declarations.
For a detailed description of document types, see the page for the !DOCTYPE element.

Example HTML code 1:

This example illustrates the use of the position property for absolutely positioned elements:

<head>
    <style>
        .lefttop {
            position: absolute;
            left: 20px;
            top: 20px;
            width: 30px;
            height: 30px;
            background-color: red;
        }
        .rightbottom {
            position: absolute;
            right: 20px;
            bottom: 20px;
            width: 30px;
            height: 30px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="lefttop"></div>
    <div class="rightbottom"></div>

    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the position property for fixed positioned elements:

<head>
    <style>
        .lefttop {
            position: fixed;
            left: 20px;
            top: 20px;
            width: 30px;
            height: 30px;
            background-color: red;
        }
        .rightbottom {
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 30px;
            height: 30px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="lefttop"></div>
    <div class="rightbottom"></div>

    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by tags:

a, abbr, acronym, address, applet, b, bdo, big, blink, blockQuote, body, button, caption, center, cite, code, dd, del, dfn, dir, div, dl, dt, em, embed, fieldSet, font, form, H1, H2, H3, H4, H5, H6, hr, i, iframe, img, input:button, input:checkbox, input:file, input:image, input:password, input:radio, input:range, input:reset, input:search, input:submit, input:text, ins, isIndex, kbd, label, legend, li, listing, marquee, menu, nobr, object, ol, p, plainText, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, td, textArea, th, tr, tt, u, ul, var, xmp

bottom
left
right
top

External links:

position (MSDN)
position (Mozilla Developer Center)
position (Safari Reference Library)
position (W3C)

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments

Frank Conijn

IE7's position:fixed plus zoom bug

IE7 also has a bug regarding position: fixed in combination with its zoom function.
The headerDiv in the following code is centered and fixed, but positioned to the right if the zoom is increased to 125%:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>IE7's position:fixed plus zoom bug</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#headerContainer {
    width: 900px;
    height: 100px;
    margin: 0 auto;
}
#headerDiv {
    width: 900px;
    height: 100px;
    background: blue;
    position: fixed;
}
</style>
</head>
<body>
    <div id="headerContainer">
        <div id="headerDiv"></div>
    </div>
</body>
</html>

The solution is to fixate it differently:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Zoom-resistant position:fixed for IE7</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#headerDiv {
    width: 900px;
    height: 100px;
    background: blue;
    position: fixed;
    left: 50%;
    margin-left: -450px;
}
</style>
</head>
<body>
    <div id="headerDiv"></div>
</body>
</html>

Frank Conijn

IE7 bug relative-absolute positioning

IE7 has a bug regarding position:absolute: it positions incorrectly in case of relative-absolute positioning. Try out the following code in IE7 and later versions:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>IE7's relative-absolute positioning bug</title>
<meta http-equiv="content-type" content="utf-8" />
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    font: normal 12px Verdana;
}
#grandContainer {
    position: relative;
    width: 980px;
    margin: auto;
}
#headerContainer {
    height: 100px;
    background: limegreen;
}
#menuContainer {
    width: 100px;
    height: 300px;
    background: yellow;
    position: absolute;
    *margin-left: -100px; /* for IE7 */
}
#contentContainer {
    height: 2000px;
    background: purple;
    margin-left: 100px;
    color: white;
}
p:first-child {
    margin-top: 0;
}
</style>
</head>
<body>
<div id="grandContainer">
    <div id="headerContainer">Header</div>
    <div id="menuContainer">Menu</div>
    <div id="contentContainer">
        <p>The margin-left:-100px for the menu section, filtered with an asterix to be rendered only by IE6/7, is what keeps the section in place in IE7. Otherwise it would be positioned inside this section. Checked with IE 9.0.81102.16421 in IE7 browser mode, and with IE 7.0.5730.13.</p>
    </div>
</div>
</body>