CSS Position - Normal Flow (Static > Static Positioning)

About

When the container and the child box has the default position value (ie static), we speak of this situation has been the normal flow.

Basically, the elements appear on the page as they appear in source code.

The normal flow in a block box context is when boxes are:

  • laid out one after the other.
  • block box or inline box.

Syntax

When the container and the child box have the position value to static, this is called the normal flow.

  • Static Container > Static Child

The Normal Flow calculation is also used in the relative positioning to calculate the box position before applying the 'top', 'right', 'bottom', and 'left' properties.

Example

Static > Static = Normal Flow

.box {
    width: 350px;
    border: 2px solid steelblue;
    /* position:static; is not needed, this is the default */
}
.botright {
    border: 2px solid red;
    bottom:0; /* Coordinates properties have no effect in a normal flow */
    right:0; /* Coordinates properties have no effect in a normal flow */
    /* position:static; is not needed, this is the default */
}
<div class="box">
text
    <p class="botright">Bottom Right</p>
text
</div>

Powered by ComboStrap