CSS: Position Relative

By Xah Lee. Date: . Last updated: .

What is Position Relative

Use position:relative to adjust a element's position relative to its normal position.

Specify Offset

use one of:

  • top:length
  • bottom:length

and one of:

  • left:length
  • right:length

Example. Offset from Left

AAA
BBB
CCC
<div id="box-a-503">
 <div>AAA</div>
 <div id="box-b-373">BBB</div>
 <div>CCC</div>
</div>
#box-a-503 {
 border: solid thin blue;
 width: 200px;
}

#box-b-373 {
 position: relative;
 left: 10px;
 border: solid thin red;
}

💡 TIP: Adjust Position Using Transform

it is much simpler to use transform to adjust an element's position.

CSS Position