CSS - The containing box

About

The containing block 1) is a logical block box that defines a coordinate system from where to apply the offset properties

In flow layout, many box positions and sizes are calculated with respect to the edges of this rectangular box.

Not to confound with a container box

A container box is a box that contains one or more other box and creates a ancestor > descendant relationship between boxes.

A containing block is just a box that is created in the positioning algorithm to calculate the position and lay out their children.

Definition

The containing block depends on the positioning model.

If the box position property is With the following ascendant rule The positioning model is Then the containing block is
relative The parent container has a static or relative position relative positioning the box itself after being laid out by the normal flow
absolute An ascendant container has a relative position absolute positioning the first ascendant relative box
or the viewport (ie screen) if none
fixed None fixed positioning an anchored viewport (ie screen)





Discover More
A [[https://combostrap.com/frontmatter|frontmatter]] title shown on the Search Engine Result Pages

A [[https://combostrap.com/frontmatter|frontmatter]] description shown on the Search Engine Result Pages
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 - Block Box Layout

CSS Block are box that can be seen as stacked element (such as paragraphs, section, ...) Block boxes: create a block formatting context (layout) and are involved in any positioning layout The...
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 - Fixed Positioning (Anchored viewport positioning)

fixed positioning is a positioning scheme where the offsets (coordinates) are calculated relative to an anchored viewport. (ie the visible part of the window, an iframe, ..). anchored means that scrolling...
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 - Offset Properties (Left, Right, Top, Bottom)

The Offset CSS Properties of a box are top, left, right, bottom They are applied to the containing box in the following positioning model in order to position a box. relative absolute...
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...



Share this page:
Follow us:
Task Runner