CSS Border Radius, Media Queries & Custom Properties (2026)

The CSS Display Property

The display property is the foundation of CSS layout. It controls how an element generates boxes and how its children are laid out. The most commonly used values are block, inline, inline-block, flex, grid, and none.

Block vs Inline vs Inline-Block

Block elements (div, p, h1) take the full available width and start on a new line. Inline elements (span, a, strong) flow within text and only take as much width as their content needs — you cannot set width or height on them. Inline-block combines both: elements flow inline but accept width, height, padding, and margin.

Flexbox Layout

Setting display: flex on a container turns it into a flex container, and its direct children become flex items. Flexbox excels at one-dimensional layouts — distributing space along a single row or column. Key properties include justify-content (main axis alignment), align-items (cross axis alignment), flex-wrap (wrapping behavior), and gap (spacing between items). Experiment with these properties in our Flexbox Playground.

CSS Grid Layout

Setting display: grid creates a two-dimensional layout system. You define rows and columns with grid-template-columns and grid-template-rows, then place items into the grid. The fr unit distributes available space proportionally — 1fr 2fr 1fr creates three columns where the middle is twice as wide. Build grid layouts visually with our CSS Grid Generator.

The CSS Position Property

The position property controls how an element is placed in the document flow. Understanding the five values — static, relative, absolute, fixed, and sticky — is essential for overlays, fixed headers, tooltips, and layered interfaces.

Static and Relative

static is the default — elements follow normal document flow. relative positions an element relative to its normal position: setting top: 10px moves it 10px down from where it would naturally sit. The element still occupies its original space in the flow — other elements don't shift to fill the gap.

Absolute and Fixed

absolute removes an element from the document flow and positions it relative to its nearest positioned ancestor (any ancestor with position other than static). If no ancestor is positioned, it's positioned relative to the viewport. fixed is similar but always positions relative to the viewport and doesn't scroll with the page — perfect for sticky headers and floating action buttons.

Sticky Positioning

sticky is a hybrid — the element scrolls normally until it reaches a specified offset (like top: 0), then it "sticks" in place. It's ideal for section headers in long lists, table headers that remain visible during scrolling, and navigation bars that pin to the top after scrolling past the hero section.

Z-Index and Stacking Context

When positioned elements overlap, z-index controls which appears on top. Higher values stack above lower values. But z-index only works on positioned elements (anything other than position: static) and within the same stacking context.

A new stacking context is created by any element with a z-index value other than auto, opacity less than 1, or CSS transforms applied. This means a z-index of 9999 inside one stacking context can still appear behind a z-index of 1 in a different context. Understanding stacking contexts prevents the common frustration of "why won't this element go on top?"

The Box Model and Box-Sizing

Every HTML element is rendered as a rectangular box with four layers: content, padding, border, and margin. By default (box-sizing: content-box), the width property only sets the content area — padding and border are added on top, making elements larger than the specified width.

Setting box-sizing: border-box includes padding and border within the specified width, making layouts far more predictable. Most modern CSS resets apply this globally. Visualize how the box model works with our Box Model Visualizer.

Overflow and Clipping

The overflow property controls what happens when content exceeds its container. visible (default) lets content spill out. hidden clips the overflow. scroll always shows scrollbars. auto shows scrollbars only when needed — the most common choice for scrollable containers. Customize scrollbar appearance with our Scrollbar Styler.

This guide is part of the Ultimate Design Tools blog. Browse all 103+ free tools.