About
relative 1) is a positioning scheme that positions a box:
- according to the normal flow,
.
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: