CSS Position - Relative Positioning (Static > Relative)

About

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.

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;
}
.box {
    border: 2px solid steelblue;
    width:350px;
    position: static /* The default (normal flow, not needed, just for info) */
}
  • The result:

Powered by ComboStrap