Last Updated: 2024-11-23

Positioning Scheme

According to this wonderful book there are three positioning schemes:

• normal flow, which consists of three formatting contexts: the block, inline and relative formatting contexts
• floats, which interact with normal flow in their own way and form the basis of most modern CSS grid frameworks
• absolute positioning, which deals with absolute and fixed elements relative to the normal flow

All elements belong to the normal flow by default unless they are specifically removed from normal flow - typically by setting the float property or the position property.

Formatting Context

"Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context (BFC). Inline-level boxes participate in an inline formatting context (IFC)". Source

The parent (container) establishes the formatting context for its children based on whether the child boxes are considered to be inline-level or block-level. The terms inline-level and block-level are defined to highlight that blocks with a display property other than inline or block will still map to one of the two formatting contexts within normal flow. For example, display: table elements are considered to be block-level and display: inline-table elements are considered to be inline-level. - source

Relative Formatting Context

When position: relative The box's position is calculated according to the normal flow [...]. Then the box is offset relative to its normal position using top etc.

Block Formatting Context (BFC)

It's the region in which the layout of block boxes occurs and in which floats interact with other elements.

A block formatting context is created by at least one of the following:

• html root
• float is not none
• absolutely positioned elements (position is absolute or fixed)
• inline blocks (display is inline-block)
• table cells or captions - display: table-cell or display: table-caption) - the defaults for table cells and captions
• block elements with overflow other than visible and clip
• display flow-root
• element with contain set to layout, content or paint
• flex items if they are neither flex/grid nor table containers themselves

Some examples.

1. If you set overflow to auto this (obviously when you notice the scrollbars) creates a new area (BFC)

Properties - laid out vertically - every box's left outer edge will touch the left outer edge of the containing block (even in the presence of floats). - floats can cause text to offset - see ehre source - will have full width of container, unless you give a specific width

Stack Contexts

The closest parallel here is "groups" in Figma/Photoshop. Basically you can have groups of items you work on as a unit then control which one appears under or over over groups. Sub-items of one group cannot interact with those of other group. See explanation here

By default, a plain HTML document will have a single stacking context that encompasses all nodes. But we can create additional contexts, e.g. via z-index. The key thing here is that all the children within the z-indexed element will also be in the same stacking context.

Flow Element

An element that can contain both block and inline elements -e.g. a div element

Absolutely positioned elements

Position is either absolute or fixed

Flex Items

Direct children of elements with display: flew or inline-flex

It "blockifies" any inline children:

display: inline- children are treated as display: block, e.g. display: inline-table

Block-Level Element

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.

Block-level boxes are boxes that participate in a block formatting context.

Inline-Level Elements

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

Anonymous box generation

Anonymous box generation is used to deal with cases where a parent element contains a mixture of inline-level and block-level child elements (in which case "anonymous block boxes" are generated) and with cases where the markup contains inline-level elements mixed with surrounding text (in which case "anonymous inline boxes" are generated), such as an em or i tag inside a paragraph of text.

<div>
    Some text
    <p>More text
</p></div>

There is an anon box created for "Some Text". This is block-level

Ref

Line Boxes

In order to vertically align bottoms or tops of texts, the rectangle than contains inline-level elements creates a "line box" behind the scenes.

Properties: - width is that of containing block minus floats - height is always sufficient for all boxes it contains. When several inline-level boxes cannot fit horizontally within a single line box, they are distributed among two or more vertically-stacked line boxes. Thus, a paragraph is a vertical stack of line boxe - however line boxes in the same inline formatting context generally vary in height (e.g., one line might contain a tall image while the others contain only text).

Float Positioning Scheme

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

Properties: - Aligned to each right or left edge of container - Floats are ignored for the purpose of vertically positioning block boxes in the same flow (i.e. they will just go over some paragraph tags) However, floats can affect the line boxes contained within block boxes in normal flow (so the text will be pushed aside). However again, it only influences line boxes later in the HTML, not prior - Floats are stacked starting from either the left or right edge, and are stacked in the order they appear in markup. In other words, for right-floated boxes, the first right-floated box is positioned on the right edge of the box that contains it and the second right-floated box is positioned immediately left of the first box. source - Because they are outside of normal flow, they do nor affect parent height (unless clearfix is used) - If there is not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.

Absolute/Fixed Positioning Scheme

The absolute / fixed positioning scheme is the last positioning scheme. It is fairly simple to describe: boxes are positioned in terms of an absolute offset with respect to the containing block.

Absolutely positioned elements are ignored for purposes of calculating normal flow positioning, and do not interact with sibling floating elements.

Psuedo Elements

E.g. :before and :after

Reason for existing: In some cases, authors may want user agents to render content that does not come from the document tree. One familiar example of this is a numbered list; the author does not want to list the numbers explicitly, he or she wants the user agent to generate them automatically.

In CSS 2.1, content may be generated by two mechanisms:

The 'content' property, in conjunction with the :before and :after pseudo-elements. Elements with a value of 'list-item' for the 'display' property.

Authors specify the style and location of generated content with the :before and :after pseudo-elements.

Negative Space

the space between actual content. Flex box is good at handling this.