Chapter 4 Layout and Positioning

Free CSS Developer Roadmap 2026 CSS roadmap for beginners Learn CSS step by step roadmap Responsive CSS learning path

A complete FREE CSS Developer Roadmap to master layouts, responsiveness, and animations.

CSS (Cascading Style Sheets) is like the HTML web designer. It doesn‘t draw the items (when you use HTML) but it tells where it goes and how it interacts with your page.

Below is a table of how layout and positioning functions, from the simplest flows to things like grids.

1. The Document Flow

Without any extra code we are working with Elements of Normal Flow

Block elements (like <div>, <h1>) stack on top of each other like bricks.
Inline elements (like <span>, <a>) sit side-by-side like words in a sentence.

2. The Box Model

Before you do anything… you need to first realize that everything is a rectangular box.

Content: The text or image inside.
Padding: Clear space inside the border (breathing room for the content).
Border: The line around the padding and content.
Margin: Clear space outside the border (distance between this box and others).

3. Positioning Properties

Position property indicates to the browser whether an element will stick to the normal flow or “break out” of it.

Type	How it behaves
Static	The default. Elements position according to the natural flow of the page
Relative	Positioned relative to it‘s natural position on the page but can be moved (topleft,bottomright)
Absolute	It “floats” and positions itself relative to its nearest positioned ancestor (usually a parent with `position: relative`).
Fixed	Sticks to the browser window. It won’t move even if you scroll.
Sticky	Acts like `relative` until you scroll to a specific point, then it “sticks” like `fixed`.

4. Modern Layout Systems

Today, we rarely use margins and floats to build entire page layouts. We use two powerful systems:

Flexbox (1D Layout)

Flex box is for arranging items in a single row or a single column. It is great to align stuff (say: images of shoe products) in the middle and to get a space-equal layout.

Main Axis: Usually horizontal (row).
Cross Axis: Usually vertical (column).

CSS Grid (2D Layout)

A grid is used for complex systems that involve combinations of both rows and columns. Here you code a “skeleton” of the columns and rows and then fit your content into certain “cells”