top: ***; right: ***; bottom: ***; left: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The top, right, bottom, and left properties specifies the display position of the box.

When you set these properties, the relative, absolute, or fixed value must be specified for the position property.


div {
position: absolute;
top: 10px;
left: 30%;
}
Property Value Explanation
top length, %, or auto the distance from the top side
right length, %, or auto the distance from the right side
bottom length, %, or auto the distance from the bottom side
left length, %, or auto the distance from the left side

The default is "auto".

Example


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

<style type="text/css">

div {
width: 300px;
height: 100px;
background-color: #85b9e9;
position: absolute;
}

#example1 {
top: 50px;
left: 150px;
}
#example2 {
top: 200px;
left: 50px;
}

</style>

</head>
<body>

<div id="example1">The first box</div>
<div id="example2">The second box</div>

</body>
</html>
Output
Example pagenew window