CSS Display and Position

CSS display and position control how elements sit in the page flow. display decides whether an element behaves like a block, inline text, a flex container or nothing at all. position lets you move elements out of the normal flow.

Display Values

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
span, div { background: #fde68a; margin: 4px; padding: 4px; }
.block { display: block; }
.inline-block { display: inline-block; width: 120px; }
.hidden { display: none; }
</style>
</head>
<body>
<span>inline</span><span>inline</span>
<span class="block">block span takes the full row</span>
<div class="inline-block">inline-block</div><div class="inline-block">accepts width</div>
<div class="hidden">You cannot see me</div>
</body>
</html>

Position Values

• static: the default, normal flow
• relative: stays in flow but can be nudged with top/left; also anchors absolute children
• absolute: removed from flow, placed relative to the nearest positioned ancestor
• fixed: placed relative to the viewport; stays put when scrolling
• sticky: acts normal until a scroll threshold, then sticks

Relative and Absolute Together

The classic pattern: give a card position: relative, then position a badge absolutely inside it. The badge is placed relative to the card, not the page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
.card { position: relative; width: 220px; padding: 30px 16px; background: #e0f2fe; border-radius: 10px; font-family: sans-serif; }
.badge { position: absolute; top: -10px; right: -10px; background: crimson; color: white; padding: 4px 10px; border-radius: 999px; }
</style>
</head>
<body>
<div class="card">Product card
  <span class="badge">NEW</span>
</div>
</body>
</html>

Sticky Header and z-index

z-index decides which positioned element is on top when they overlap; higher wins. Scroll inside the example to see the sticky header.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
body { margin: 0; font-family: sans-serif; }
header { position: sticky; top: 0; z-index: 10; background: #111827; color: white; padding: 12px; }
p { padding: 0 12px; }
</style>
</head>
<body>
<header>Sticky header</header>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
<p>Scroll down. The header stays at the top.</p>
</body>
</html>

Frequently asked questions

What is the difference between position relative and absolute?

relative keeps the element in normal flow and offsets it visually. absolute removes it from flow and positions it against the nearest ancestor that is not static.

What is the difference between display: none and visibility: hidden?

display: none removes the element and its space completely. visibility: hidden hides it but keeps the empty space.

Why is z-index not working?

z-index only applies to positioned elements (or flex and grid items), and it is limited by the stacking context of parent elements.