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>





Discover More
CSS - (Box) Positioning (Scheme)

CSS This section is all how boxes are positioned / laid out on the page. boxcontent (text, image) a box located at the right side and its content at the left side a box taking the whole width...
CSS - Absolute Positioning (Relative / Absolute / Fixed > Absolute or Static > Absolute )

absolute positioning is a positioning model that occurs when a box has the absolute value as position property. When this is the case, the absolute box is positioned: * from the first ascending box...
CSS - Bottom Property

The bottom property is the offset from the bottom edge of the . It applies only if the box itself has a position value of: relative absolute or fixed staticleftnormal flow positioning model ...
CSS - Image

The image type in CSS is given: a url that specifies: binary / raster image formats (such as gif, jpeg, etc) dedicated markup formats (such as SVG) or a gradient function (such as linear-gradient...
Flex Vs Grid Css
CSS - Layout Mode (Visual Formatting Model)

This page is the layout available in CSS. A layout system is an algorithm which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes: In Css,...
CSS - Left property explained as 1, 2, 3

The left property is an offset from the left edge of the containing block. This article shows you in two simple rules how to determine the containing block.
CSS - Position Property

The position property specifies the positioning algorithms (positioning scheme) for elements. The position is calculated with respect to the edges of a rectangular box called the containing block. ...
CSS - Right Property

The right property is the offset from the right edge of the . It applies only if the box itself has a position value of: relative absolute or fixed staticrightnormal flow positioning model ...
CSS - Sticky positioning (Pinning)

Sticky is a positioning option that: keeps the box in view (ie in the viewport)) within its containing block as the user scrolls. From a logical point of view, the element is treated: first...
CSS - The containing box

The containing box is a box that is used in the positioning of element on the page



Share this page:
Follow us:
Task Runner