CSS Position - Relative Positioning (Static > Relative)

About

relative ¹⁾ is a positioning scheme that positions a box:

• according to the normal flow,
• then translate the box position with the offset properties (ie top, left, right, bottom)

.

The offset properties are calculated with respect to the edges of the positioned box in the normal flow.

Example

In this example, we create two boxes:

• one normally positioned (ie normal flow static positioning)
• and one relatively positioned

to show the difference.

• First, the box in the normal flow

 <div class="box"> text <p class="child-box">Box in the normal flow without offset</p> text </div> 

• Then a box relatively positioned

 <b>versus</b> <div class="box"> text <p class="child-box-offset child-box">Relative Box positioning with a bottom offset that moves the box up with 10px</p> text </div> 

• Then we create the style for the relatively positioned box. We use here only bottom. 10px moves up from the bottom of normal positioned box.

 .child-box-offset { position:relative; bottom:10px; } 

• We add a border to the child boxes to visually show the placement

 .child-box { border: 2px solid red; margin: 0px; } 

• We style the containing box. It will be a div element. By default, this element is a block box and has a static positioning by default..

 .box { border: 2px solid steelblue; width:350px; position: static /* The default (normal flow, not needed, just for info) */ } 

• The result: