55 Mins intermediate
11. Display & Positioning
CSS
Display & Positioning
The display and position properties are what you'll reach for constantly when building layouts. They control how elements sit relative to each other and the page.
📦 Block vs Inline vs Inline-Block
<style>
.block { display: block; background: #4FC3F7; margin: 5px 0; padding: 8px; color:white; }
.inline { display: inline; background: #ffca28; padding: 4px 8px; color:#333; }
.inline-block { display: inline-block; background: #66bb6a; padding: 8px 16px; color:white; margin: 4px; }
</style>
<div class="block">Block — takes full width, starts new line</div>
<div class="block">Block — another one below</div>
<p>
<span class="inline">inline</span> elements sit
<span class="inline">side by side</span> inside text.
</p>
<div>
<div class="inline-block">inline-block A</div>
<div class="inline-block">inline-block B</div>
<div class="inline-block">inline-block C</div>
</div>
📌 CSS Position
<style>
.container { position: relative; height: 140px; background: #f0f0f0; border: 2px dashed #aaa; }
.static { position: static; background: #4FC3F7; color:white; padding:8px; margin:5px; }
.relative { position: relative; top: 10px; left: 20px; background: #ff7043; color:white; padding:8px; }
.absolute { position: absolute; top: 10px; right: 10px; background: #66bb6a; color:white; padding:8px; }
</style>
<div class="container">
<div class="static">static — normal flow</div>
<div class="relative">relative — offset from normal spot</div>
<div class="absolute">absolute — pinned to parent corner</div>
</div>
📌 Fixed & Sticky Positioning
<style>
.sticky-bar {
position: sticky;
top: 0;
background: #1a1a2e;
color: white;
padding: 12px 20px;
font-family: sans-serif;
font-weight: bold;
z-index: 10;
}
.content { padding: 20px; font-family: sans-serif; }
</style>
<div class="sticky-bar">🔵 Sticky Navigation — Stays at top when scrolling</div>
<div class="content">
<p>Scroll down inside this preview to see the sticky header in action.</p>
<p style="margin-top:50px;">Content below...</p>
</div>
Knowledge Check
Ready to test your understanding of 11. Display & Positioning?