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 class="box-aa">
 <div>AAA</div>
 <div class="box-bb">BBB</div>
 <div>CCC</div>
</div>
.box-aa {
 border: solid thin blue;
 width: 200px;
}

.box-bb {
 position: relative;
 left: 10px;
 border: solid thin red;
}

Adjust Position Using Transform

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

CSS Position