sets how a box will be positioned


position: ***;

Browser
Internet Explorer Firefox Opera

The position property sets how a box will be positioned.


.example {
position: absolute;
top: 50px;
left: 50px;

}


Property Value Explanation
position static the normal position (default)Internet ExplorerFirefoxOpera
relative the relative position from the normal positionInternet ExplorerFirefoxOpera
absolute the absolute position from the parent elementInternet ExplorerFirefoxOpera
fixed the absolute and fixed position from the windowFirefoxOpera

static (The normal position)Internet ExplorerFirefoxOpera

The static value ignores the top, bottom, left, or right properties.

div {
width: 200px;
height: 100px;

}

<div style="background-color: #85b9e9;">The first box</div>
<div style="background-color: #ffd78c; position: static;">The second box</div>
<div style="background-color: #bde9ba;">The third box</div>

Example page

The second box is displayed at the normal position.


relative (The relative position from the normal position)Internet ExplorerFirefoxOpera

The box's position can be moved using the top, bottom, left, or right properties.

div {
width: 200px;
height: 100px;

}

<div style="background-color: #85b9e9;">The first box</div>
<div style="background-color: #ffd78c; position: relative; top: 0; left:100px;">The second box</div>
<div style="background-color: #bde9ba;">The third box</div>

Example page

The second box is moved from the left of the normal position to the position of 100px.


absolute (The absolute position from the parent element)Internet ExplorerFirefoxOpera

The box's position can be moved using the top, bottom, left, or right properties.

Specify the relative or absolute for the parent element. If it is not specified, this becomes the absolute position from the window.

div {
width: 200px;
height: 100px;

}

<div style="background-color: #85b9e9;">The first box</div>
<div style="background-color: #ffd78c;">The second box</div>
<div style="background-color: #bde9ba; position: absolute; top: 50px; left:100px;">The third box</div>

Example page

The third box is moved from the top of the window to the position of 50px and the left to the position of 100px.


fixed (The absolute and fixed position from the window)FirefoxOpera

The box's position can be moved using the top, bottom, left, or right properties. (The box is fixed to the specified position)

div {
width: 200px;
height: 100px;

}

<div style="background-color: #85b9e9;">The first box</div>
<div style="background-color: #ffd78c;">The second box</div>
<div style="background-color: #bde9ba; position: fixed; top: 50px; left:100px;">The third box</div>

Example page

The third box is moved and fixed from the top of the window to the position of 50px and the left to the position of 100px. (The position doesn't change even if it scrolls)


Example

Two boxes are displayed in the parent box

<html>
<head>
<title>TAG index</title>

<style type="text/css">

#example { /* The parent box */
width: 450px;
height: 200px;
background-color: #85b9e9;
position: absolute;
top: 50px;
left: 100px;
}

#box1 { /* The first box */
width: 150px;
height: 50px;
background-color: #ffd78c;
position: absolute;
top: 50px;
left: 50px;
}

#box2 { /* The second box */
width: 150px;
height: 50px;
background-color: #bde9ba;
position: absolute;
top: 50px;
left: 250px;
}

</style>

</head>
<body>

<div id="example">

<div id="box1">The first box</div>
<div id="box2">The second box</div>

</div>

</body>
</html>
Output