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: