🎨 Days 1–6 – CSS Foundations · Day 06
Day 6: Display, Position, z-index & Overflow
⏱ 85 min📶 Intermediate🎯 100% self-study
Day 6 / 20
✅ Today you will learn
- display: block, inline, inline-block, none
- Hiding things: display, visibility, opacity, hidden
- position: static, relative, absolute, fixed, sticky
- z-index and stacking contexts
- overflow, scroll areas and aspect-ratio
🏢 In the real world
Three requests from one client in one week: a “20% OFF” badge on the corner of product photos, a header that stays on top while scrolling, and a green WhatsApp button that floats in the bottom-right corner of every page. All three are positioning – the topic that confuses beginners most, and that you will master today.
display: how a box sits in the flow
HTML + CSS
<style>
.d { background: #dbeafe; border: 1px solid #264de4; padding: 6px; margin: 4px; }
.block { display: block; }
.inline { display: inline; width: 300px; height: 80px; } /* width/height ignored! */
.ib { display: inline-block; width: 140px; }
</style>
<span class="d block">block – full width, new line</span>
<span class="d block">block</span>
<span class="d inline">inline – flows in text</span><span class="d inline">inline</span>
<p><span class="d ib">inline-block – sits in line but accepts width</span><span class="d ib">inline-block</span></p>| display | New line? | width/height? | Default for |
|---|---|---|---|
| block | Yes | Yes | div, p, h1–h6, section, ul |
| inline | No | No (vertical padding overlaps) | span, a, strong, em |
| inline-block | No | Yes | button, input, img (similar) |
| flex / grid | Yes (container) | Yes | Layouts – Days 7–10 |
| none | Removed | — | Hidden menus, closed tabs |
display: none
- Removed from layout – space closes
- Not read by screen readers
- Use for closed menus, tabs
visibility: hidden / opacity: 0
- Invisible but keeps its space
- opacity: 0 can still be clicked!
- Use for fade animations
CSS – visually hidden but readable by screen readers
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* <button><svg …/><span class="sr-only">Open menu</span></button> */position: the five values
| Value | Moves relative to | Keeps its space? | Real use |
|---|---|---|---|
| static | — (default) | Yes | Normal flow |
| relative | Its own normal place | Yes | Small nudges; becomes the anchor for absolute children ⭐ |
| absolute | Nearest positioned ancestor | No | Badges, icons, tooltips, overlays |
| fixed | The browser window | No | WhatsApp button, cookie bar |
| sticky | Scroll container, after a threshold | Yes | Headers, table heads, sidebars |
abs
HTML + CSS
<style>
.product { position: relative; width: 220px; border-radius: 12px; overflow: hidden; }
.product img { display: block; width: 100%; }
.badge {
position: absolute;
top: 10px;
left: 10px;
background: #dc2626; color: white;
font: 700 12px system-ui; padding: 4px 8px; border-radius: 6px;
}
.fav {
position: absolute; top: 8px; right: 8px;
width: 34px; height: 34px; border-radius: 50%;
background: white; display: grid; place-items: center;
}
</style>
<div class="product">
<img src="images/kaju-katli-400.webp" alt="Kaju katli" width="400" height="300">
<span class="badge">20% OFF</span>
<span class="fav" aria-label="Add to wishlist">♡</span>
</div>⚠️ Badge flies to the top of the page?
An absolute element positions itself against the nearest ancestor that has a position other than static. Forgot position: relative on the card? Then it uses the whole page. This is bug #1 with absolute positioning.
sticky
HTML + CSS
<style>
.scroller { height: 210px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 10px; }
.top {
position: sticky;
top: 0;
background: #264de4; color: #fff; padding: 10px 14px; font-weight: 700;
z-index: 1;
}
.scroller p { margin: 0; padding: 14px; border-bottom: 1px solid #f1f5f9; }
</style>
<div class="scroller">
<div class="top">Sharma Sweets · Menu</div>
<p>1. Kaju katli – ₹900</p><p>2. Rasmalai – ₹700</p><p>3. Ghewar – ₹650</p><p>4. Kalakand – ₹600</p><p>5. Ladoo – ₹500</p><p>6. Rasgulla – ₹400</p><p>7. Soan papdi – ₹380</p>
</div>fixed
HTML + CSS
<style>
.wa {
position: fixed;
right: 16px;
bottom: 16px;
width: 56px; height: 56px; border-radius: 50%;
background: #25d366; color: white; font-size: 28px;
display: grid; place-items: center; text-decoration: none;
box-shadow: 0 6px 20px rgb(0 0 0 / 25%);
z-index: 1000;
}
</style>
<p>Scroll the page – the green button stays in the corner of the window.</p>
<p style="height:300px;background:linear-gradient(#f8fafc,#e2e8f0)">Long content…</p>
<a class="wa" href="https://wa.me/919829012345" aria-label="Chat on WhatsApp">✆</a>z-index: who is on top?
HTML + CSS
<style>
.stack { position: relative; height: 130px; }
.s { position: absolute; width: 120px; height: 80px; border-radius: 10px; color: #fff; padding: 8px; font: 600 13px system-ui; }
.s1 { background: #264de4; left: 0; top: 0; z-index: 3; }
.s2 { background: #06b6d4; left: 60px; top: 25px; z-index: 2; }
.s3 { background: #f59e0b; left: 120px; top: 50px; z-index: 1; }
</style>
<div class="stack">
<div class="s s1">z-index: 3</div>
<div class="s s2">z-index: 2</div>
<div class="s s3">z-index: 1</div>
</div>🧠 Stacking context – why z-index: 9999 still loses
A parent with position + z-index, opacity < 1, transform or filter creates its own stacking context. Children can never rise above that parent’s level. Fix the z-index on the parent, not the child. Keep a simple scale: 10 dropdowns, 100 sticky header, 1000 modals.
overflow and aspect-ratio
HTML + CSS
<style>
.tbl-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 8px; }
.tbl-wrap table { min-width: 520px; border-collapse: collapse; }
.tbl-wrap td { padding: 8px 12px; border-bottom: 1px solid #f1f5f9; white-space: nowrap; }
.video { aspect-ratio: 16 / 9; width: 100%; max-width: 360px; background: #111827; color: #fff; display: grid; place-items: center; border-radius: 10px; margin-top: 10px; }
</style>
<div class="tbl-wrap"><table><tr><td>Order #1042</td><td>Aarti Gupta</td><td>Kaju katli 2 kg</td><td>₹1,800</td><td>Delivered</td></tr><tr><td>Order #1043</td><td>R. Meena</td><td>Ghewar 1 kg</td><td>₹650</td><td>Packing</td></tr></table></div>
<div class="video">16:9 box at any width</div>🏅 Job skills unlocked today
✔ Choose block, inline, inline-block or none✔ Hide content correctly for users and screen readers✔ Pin badges, build sticky headers and floating buttons✔ Control layers with z-index and overflow
Practice tasks
🏋️ Practice – do it yourself
Task 1: Add a “Bestseller” ribbon to the top-right corner of a product card.
Show solution
Task 2: Make a cookie notice bar fixed to the bottom of the window with an “OK” button.
Task 3: Make the <thead> of a long table sticky while the table scrolls inside a 300px-tall box.
Quick quiz
🧠 Quick Quiz – test yourself
1. Which display ignores width and height?
Inline boxes size to their content.
2. An absolute badge appears at the page top. Missing?
It needs a positioned ancestor.
3. Which stays in the same place on screen while scrolling?
Relative to the viewport.
4. position: sticky requires…
Without top/bottom it never sticks.
5. opacity: 0 elements…
Use visibility or pointer-events too.
Interview corner
💼 Interview Corner
Difference between absolute, fixed and sticky?
absolute is removed from flow and placed relative to the nearest positioned ancestor; fixed is removed from flow and placed relative to the viewport; sticky stays in flow and behaves like relative until a scroll threshold, then sticks within its scroll container.
Why might z-index not work?
The element may not be positioned (or a flex/grid item), or it is inside a parent that creates a stacking context with a lower level – opacity, transform, filter or a z-indexed position create new contexts.
Summary
- block/inline/inline-block decide flow; none removes.
- relative parent + absolute child = badges and overlays.
- fixed for floating buttons, sticky for headers.
- z-index works within stacking contexts; overflow-x: auto for wide tables.
➡️ Next
Day 7: Flexbox – the modern way to align and distribute items in a row or column.
Frequently Asked Questions
Sticky does not work – why?
Common causes: no top value, a parent with overflow: hidden/auto, or the parent is no taller than the sticky element.
Should I use float for layouts?
No. Floats are only for wrapping text around an image. Use Flexbox and Grid (next four days) for layouts.
