relative 1) is a positioning scheme that positions a box:
.
The offset properties are calculated with respect to the edges of the positioned box in the normal flow.
In this example, we create two boxes:
to show the difference.
<div class="box">
text
<p class="child-box">Box in the normal flow without offset</p>
text
</div>
<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>
.child-box-offset {
position:relative;
bottom:10px;
}
.child-box {
border: 2px solid red;
margin: 0px;
}
.box {
border: 2px solid steelblue;
width:350px;
position: static /* The default (normal flow, not needed, just for info) */
}