🎨 Days 1–6 – CSS की नींव · दिन 06

दिन 6: Display, Position, z-index और Overflow

⏱ 85 min📶 Intermediate🎯 100% self-study

दिन 6 / 20

✅ आज आप सीखेंगे

display: block, inline, inline-block, none
चीज़ें छिपाना: display, visibility, opacity, hidden
position: static, relative, absolute, fixed, sticky
z-index और stacking contexts
overflow, scroll areas और aspect-ratio

🏢 असली दुनिया में

एक client की एक हफ़्ते में तीन माँगें: product photos के कोने पर “20% OFF” badge, scroll करते समय ऊपर टिका रहने वाला header, और हर page के नीचे-दाएँ कोने में तैरता हरा WhatsApp button। तीनों positioning हैं – वो topic जो beginners को सबसे ज़्यादा उलझाता है, और जिसे आप आज master करेंगे।

display: box 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>

▶ block vs inline vs inline-block

display	नई line?	width/height?	किसका default
block	हाँ	हाँ	div, p, h1–h6, section, ul
inline	नहीं	नहीं (vertical padding overlap)	span, a, strong, em
inline-block	नहीं	हाँ	button, input, img (मिलते-जुलते)
flex / grid	हाँ (container)	हाँ	Layouts – Days 7–10
none	हटा दिया	—	छिपे menus, बंद tabs

display: none

Layout से हटता है – जगह बंद
Screen readers नहीं पढ़ते
बंद menus, tabs के लिए

visibility: hidden / opacity: 0

अदृश्य पर जगह रखता है
opacity: 0 पर अब भी click हो सकता है!
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: पाँच values

Value	किसके सापेक्ष	जगह रखता है?	असली उपयोग
static	— (default)	हाँ	सामान्य flow
relative	अपनी सामान्य जगह	हाँ	हल्का खिसकाना; absolute children का anchor ⭐
absolute	सबसे पास का positioned ancestor	नहीं	Badges, icons, tooltips, overlays
fixed	Browser window	नहीं	WhatsApp button, cookie bar
sticky	Scroll container, एक सीमा के बाद	हाँ	Headers, table heads, sidebars

The badge pattern: relative parent + absolute child

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 and wishlist icon pinned to the corners of the photo

⚠️ Badge page के ऊपर उड़ जाता है?

Absolute element सबसे पास के ऐसे ancestor के सापेक्ष बैठता है जिसका position static न हो। Card पर position: relative भूल गए? तो वह पूरे page का इस्तेमाल करता है। Absolute positioning का यही bug #1 है।

Sticky header inside a scrolling area

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>

▶ Scroll inside the box – the header sticks

Fixed floating WhatsApp button

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>

▶ position: fixed sticks to the window, not the page

z-index: ऊपर कौन?

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>

▶ Higher z-index paints on top (only for positioned/flex/grid items)

🧠 Stacking context – z-index: 9999 फिर भी क्यों हारता है

position + z-index, opacity < 1, transform या filter वाला parent अपना stacking context बनाता है। Children उस parent के स्तर से ऊपर कभी नहीं जा सकते। Child की जगह parent का z-index ठीक करें। आसान scale रखें: 10 dropdowns, 100 sticky header, 1000 modals।

overflow और 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>

▶ Wide tables scroll inside their box on phones; aspect-ratio keeps shapes

🏅 आज के Job Skills

✔ block, inline, inline-block या none चुनना✔ Users और screen readers के लिए content सही छिपाना✔ Badges, sticky headers और floating buttons बनाना✔ z-index और overflow से layers नियंत्रित करना

Practice tasks

🏋️ Practice – ख़ुद करें

Task 1: Product card के ऊपर-दाएँ कोने पर “Bestseller” ribbon जोड़ें।

Solution देखें

▶ Result

Task 2: Window के नीचे fixed cookie notice bar बनाएँ जिसमें “OK” button हो।

Task 3: 300px ऊँचे box में scroll होती लंबी table का <thead> sticky बनाएँ।

Quick quiz

🧠 Quick Quiz – ख़ुद को जाँचें

1. कौन सा display width और height नज़रअंदाज़ करता है?

Inline boxes content के अनुसार।

2. Absolute badge page के ऊपर दिखता है। क्या छूटा?

Positioned ancestor चाहिए।

3. Scroll करते समय screen पर एक जगह कौन रहता है?

Viewport के सापेक्ष।

4. position: sticky को चाहिए…

top/bottom बिना कभी नहीं चिपकता।

5. opacity: 0 वाले elements…

visibility या pointer-events भी लें।

Interview corner

💼 Interview Corner

absolute, fixed और sticky में फ़र्क?

absolute flow से हटकर सबसे पास के positioned ancestor के सापेक्ष बैठता है; fixed flow से हटकर viewport के सापेक्ष; sticky flow में रहकर scroll सीमा तक relative जैसा, फिर अपने scroll container में चिपकता है।

z-index काम क्यों न करे?

Element positioned (या flex/grid item) न हो, या ऐसे parent में हो जो कम स्तर का stacking context बनाता है – opacity, transform, filter या z-index वाला position नए contexts बनाते हैं।

सारांश

block/inline/inline-block flow तय करते हैं; none हटाता है।
relative parent + absolute child = badges और overlays।
Floating buttons के लिए fixed, headers के लिए sticky।
z-index stacking contexts के अंदर काम करता है; चौड़ी tables के लिए overflow-x: auto।

➡️ आगे

Day 7: Flexbox – row या column में items को align और बाँटने का आधुनिक तरीक़ा।

अक्सर पूछे जाने वाले प्रश्न (FAQ)

Sticky काम नहीं करता – क्यों?

आम कारण: top value नहीं, parent पर overflow: hidden/auto, या parent sticky element से ऊँचा नहीं।

क्या layouts के लिए float लें?

नहीं। Float सिर्फ़ image के चारों ओर text लपेटने के लिए है। Layouts के लिए Flexbox और Grid (अगले चार दिन) लें।

← CSS (20 Days)

दिन 6: Display, Position, z-index और Overflow

✅ आज आप सीखेंगे

🏢 असली दुनिया में

display: box flow में कैसे बैठता है

display: none

visibility: hidden / opacity: 0

position: पाँच values

The badge pattern: relative parent + absolute child

Sticky header inside a scrolling area

Fixed floating WhatsApp button

z-index: ऊपर कौन?

overflow और aspect-ratio

🏅 आज के Job Skills

Practice tasks

🏋️ Practice – ख़ुद करें

Quick quiz

🧠 Quick Quiz – ख़ुद को जाँचें

Interview corner

💼 Interview Corner

सारांश

अक्सर पूछे जाने वाले प्रश्न (FAQ)

यह lesson कैसा लगा?

पढ़ने वालों के reviews

Video से सीखें – आसान Hindi में