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
- The css without any position property to use the default (static) and with the
.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>