position: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

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)
relative the relative position from the normal position
absolute the absolute position from the parent element
fixed the absolute and fixed position from the window

static (The normal position)

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 pagenew window

The second box is displayed at the normal position.

relative (The relative position from the normal position)

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 pagenew window

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)

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 pagenew window

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)

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 pagenew window

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
Example pagenew window