CSS Z-index

अपनी desk पर papers के stack की कल्पना करें। हर paper आपके webpage पर एक box represent करता है। Default रूप से, आप जो paper सबसे आख़िर में रखते हैं वह बाकियों के ऊपर बैठता है। अगर आप किसी पुराने paper को ऊपर लाना चाहें, तो आप उसकी priority बदल देते हैं। CSS z-index वही priority order है। यह virtual Z-axis (आपकी screen की तरफ़ या उससे दूर pointing) के साथ overlapping elements की vertical stacking layer control करता है। z-index values assign करके, आप control कर सकते हैं कि कौन-से cards, sidebars, alerts, या popup modals ऊपर बैठें, और कौन-से background में layered रहें।

In this page:

Virtual Z-Axis Stack
Positioned Elements चाहिए
Stacking Contexts को समझना
Stacking Order Guides को Standardize करना
opacity और transform के साथ Implicit Stacking

Syntax

css

selector {
  position: relative;
  z-index: integer;
}

Virtual Z-Axis Stack

Webpages तीन dimensions में render होते हैं। X-axis horizontal layout handle करता है, Y-axis vertical content flow handle करता है, और Z-axis stacking depth handle करता है। z-index property तय करती है कि positioned elements इस virtual stacking layer में कहाँ बैठते हैं।

Note:

overlapping cards, floating alerts, और layout blocks को साफ़ तरीके से manage करने के लिए z-index इस्तेमाल करें।
Accepted values:
integer — कोई भी whole number, positive या negative, जैसे 10
auto — parent का stacking order इस्तेमाल करता है (default)
सिर्फ positioned elements या flex और grid items पर काम करता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: Z-index values positive या negative हो सकती हैं, लेकिन negative values elements को background container backgrounds के पीछे धकेल सकती हैं, उन्हें unclickable बनाते हुए।

उदाहरण: The Virtual Z-Axis Stack

css

<style>
.wrapper {
  position: relative;
  min-height: 100px;
}
.back {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 140px;
  height: 80px;
  background: gray;
  color: white;
  z-index: 1;
}
.front {
  position: absolute;
  top: 30px;
  left: 40px;
  width: 140px;
  height: 80px;
  background: tomato;
  color: white;
  z-index: 2;
}
</style>
<div class="wrapper">
  <div class="back">Behind on the Z-axis</div>
  <div class="front">In front on the Z-axis</div>
</div>

Positioned Elements चाहिए

एक common confusion यह है कि z-index property काम क्यों नहीं कर रही। Z-index सिर्फ positioned elements पर काम करेगा (relative, absolute, fixed, या sticky position वाले elements)। इसे statically positioned elements पर नज़रअंदाज़ कर दिया जाता है।

Note:

अगर z-index rule काम नहीं कर रहा, तो सुनिश्चित करें कि element की position static के अलावा कुछ और है।
Accepted values:
auto — document में order को follow करता है (initial value)
integer — जैसे 1, 10, 999
negative integer — siblings के पीछे
0 — positioned elements पर एक stacking context बनाता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: सिर्फ z-index enable करने के लिए किसी element में position: relative जोड़ना safe है, लेकिन गलती से offsets introduce न होने का ध्यान रखें।

उदाहरण: Requires Positioned Elements

css

<style>
.ignored {
  z-index: 999;
  background: gray;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
}
.works {
  position: relative;
  z-index: 999;
  background: crimson;
  color: white;
  padding: 10px;
}
</style>
<div class="ignored">z-index ignored (position: static)</div>
<div class="works">z-index works (position: relative)</div>

Stacking Contexts को समझना

Z-index layers globally operate नहीं करते। ये उन parent elements के अंदर सीमित होते हैं जो एक 'Stacking Context' बनाते हैं। z-index 1 वाले किसी parent के अंदर nested z-index 999 वाला एक element फिर भी main page structure पर z-index 2 वाले किसी element के पीछे बैठ सकता है।

Note: Stacking contexts को folders की तरह सोचें: folder 1 के अंदर की हर चीज़ folder 2 के पीछे रहती है, internal index numbers चाहे जो भी हों।

Warning: Nested stacking contexts बनाना complex layouts में overlapping elements को debug करना मुश्किल बना सकता है।

उदाहरण: Understanding Stacking Contexts

css

<style>
.parent {
  position: relative;
  z-index: 1;
  background: #eef;
  padding: 10px;
  min-height: 100px;
}
.child {
  position: relative;
  z-index: 999;
  top: 20px;
  background: crimson;
  color: white;
  padding: 8px;
  display: inline-block;
}
.sibling {
  position: relative;
  z-index: 2;
  top: -20px;
  left: 20px;
  background: seagreen;
  color: white;
  padding: 8px;
  display: inline-block;
}
</style>
<div class="parent">
  <div class="child">z-index 999, but trapped inside the parent's stacking context</div>
</div>
<div class="sibling">z-index 2, still stacks above the parent above</div>

Stacking Order Guides को Standardize करना

जैसे-जैसे websites बढ़ती हैं, z-index values manage करना गड़बड़ हो सकता है। एक standardized z-index reference guide बनाना (जैसे 10 या 100 के increments इस्तेमाल करना) styling conflicts को रोकने और layouts को साफ़ रखने में मदद करता है।

Note: अपनी stylesheet rules को साफ़ रखने के लिए अपनी z-index values को structured layers में organize करें (जैसे, header: 100, modal: 200)।

Warning: 99999 जैसी arbitrary z-index values इस्तेमाल करने से बचें, क्योंकि वे rendering bugs और conflicts पैदा कर सकती हैं।

उदाहरण: Standardizing Stacking Order Guides

css

<style>
.header {
  position: relative;
  z-index: 100;
  background: steelblue;
  color: white;
  padding: 10px;
}
.modal {
  position: relative;
  z-index: 200;
  top: -20px;
  left: 20px;
  background: crimson;
  color: white;
  padding: 10px;
}
</style>
<div class="header">Layer 100</div>
<div class="modal">Layer 200</div>

opacity और transform के साथ Implicit Stacking

Z-index coordinates कभी-कभी बिना explicit z-index rules के trigger हो सकते हैं। opacity (1.0 से कम), transform, या filter जैसी properties natively नए stacking contexts अपने आप बना देती हैं, जो element layering को असर कर सकती हैं।

Note: अगर elements unexpectedly stack हो रहे हैं, तो check करें कि क्या transform जैसी properties नए stacking contexts बना रही हैं।

Warning: किसी container पर opacity लागू करना उसके सभी nested elements को page पर आस-पास के content layers के पीछे धकेल सकता है।

उदाहरण: Implicit Stacking with opacity and transform

css

<style>
.box {
  opacity: 0.99;
  transform: translateZ(0);
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
</style>
<div class="box">Creates a new stacking context without an explicit z-index</div>

Live Example

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson CSS Position Offsets Next Lesson → CSS Overflow