Z-index क्या है
Z-index utilities control करती हैं कौन-सा overlapping element ऊपर appear होता है।
In this page:
Syntax
<div class="position-relative z-1">above</div>
<div class="position-relative z-n1">below</div>Z-Index
Utilities .z-n1, .z-0, .z-1, .z-2, और .z-3 positioned elements के लिए stacking order set करती हैं। Bootstrap के अपने components higher values इस्तेमाल करते हैं ताकि dropdowns, modals, और tooltips content के ऊपर appear हों। z-index सिर्फ positioned elements या flex और grid items पर काम करता है।
Note:
z-index काम करने के लिए static से अलग एक position चाहिए।
उदाहरण: Z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container position-relative" style="height: 7rem">
<div class="position-absolute top-0 start-0 bg-primary text-white p-4 z-1">z-1 (bottom)</div>
<div class="position-absolute top-0 start-0 bg-danger text-white p-4 z-3" style="margin:1.5rem 0 0 2.5rem">z-3 (top)</div>
</div>
</body>
</html>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- static elements पर z-index इस्तेमाल करना
- बहुत बड़ी custom values इस्तेमाल करना
- Bootstrap components की stacking से लड़ना
चैप्टर सारांश
- z-n1, z-0, z-1, z-2, z-3 classes मिलती हैं
- Positioned elements पर काम करता है
- Components higher built-in values इस्तेमाल करते हैं
- बड़ी custom values से बचें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: