Learn CSS Layout the pedantic way

published on 2024/02/29

You may have heard that there are inline and block elements in CSS normal flow. But did you know that in CSS, the relative positioning of block and inline elements is not actually determined by the element's display property? It's actually determined by the formatting context, which is influenced by the siblings of the element.

You may have used z-index to "fix" the relative stacking order of content. But did you know that z-index is not absolute across the document, but rather relative to a stacking context?

You may have heard about the box model. But did you know that there are in fact at least five different box models, with subtle differences in how content dimensions and margin: auto are treated? You will, if you read this.

This is a set of chapters about CSS layout for people who already know CSS. Which seems like a small market, I admit. I took a look around for good resources for learning CSS layout, but I found that most of them weren't pedantic enough.