Introduction to the visual formatting model

The visual formatting model explains how browsers process elements and their relative positions within a document tree for

What is a containing block?

The positions and size of an element is almost always calculated relative to a rectang...

Box generation and display property

There are two main ways of elements appearance in a document tree; that are block-level elements and inline-level elements. Block-level elements are these elements that appear formatted as...

Positioning schemes

A CSS box, inside a document tree, may be positioned or laid out in one of the three possible sc...

Normal flow and relative positioning

In the normal flow, boxes participate in the layout formatting context. The block boxes...

Floating elements

  A floating box is a box that is shifted to the left or right from the current flow line. By using the float property, content may be allowed to flow along the floate...

Absolute positioning

The absolutely positioned elements offset a box in respect to its containing block....

Relationship between display, position and float properties

The relationship and interaction between these three properties that control the box generation...

Elements stacked and z-index

With the CSS there is a possibility of stacking multiple boxes (elements) on top of each other to achieve a certain visual effect or perhaps a functional one, for instance due an

Content's width

The property width specifies the width of the boxes. This property does not apply to