CSS Position - Relative Positioning (Static > Relative)

About

The box's position is calculated according to the normal flow. Plus, the 'top', 'right', 'bottom', and 'left' properties apply.

For relatively positioned boxes, the offset is with respect to the edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to the box offset properties:

Example

  • The containing box is a div element. A div element is a block box by default and has a static positioning by default..
.box {
    border: 2px solid steelblue;
    width:350px;
    position: static /* The default (normal flow) */
}
  • The absolute position is based on the position of the relative box in a normal flow. Ie for 10px bottom, it's 10px moves up from the normal positioning of the box.
.box-offset {
    position:relative;
    border: 2px solid red;
    margin: 0px;
    bottom:10px;
}
<div class="box">
text
    <p >Box in the normal flow without offset</p>
    text
</div>
<b>versus</b>
<div class="box">
text
    <p class="box-offset">Relative Box positioning with offset</p>
    text
</div>

Documentation / Reference


Powered by ComboStrap