CSS Layout algorithms

Layout algorithms define what the different CSS properties and values do

CSS properties and values can behave differently depending on the layout algorithm that the element is using.

For example, the z-index property works as intended (controls stacking order) in the flex and positioned layouts, but it doesn’t do anything in the flow layout. A width: 2000px rule in the flow layout always makes an element 2000px wide, but in the flex layout, it’s more of an ideal width that may or may not make an element 2000px depending on various factors.

It can help to think of CSS properties and values as arguments to a function, the function being the layout algorithm. It’s up to the layout algorithm to decide what to do with our inputs.

The different layout algorithms

Here are the layout algorithms available in CSS. Some of these algorithms have their own variants.

• Flow
  • Block
  • Inline
• Positioned
  • Absolute
  • Relative
  • Static
  • Fixed
  • Sticky
• Flex
• Grid
• Table
• Float

Other notes

Certain layout modes have higher specificity than others. For example, Positioned layouts tend to take priority over other layouts.

Sources

• Understanding Layout Algorithms