CSS ग्रिड में एलिमेंट्स का ओवरलैपिंग
ग्रिड सिस्टम में ग्रिड एरिया के इंटरसेक्शन या नेगेटिव मार्जिन देने पर
एक एलिमेंट को दूसरे पर ओवरलैप करने की क्षमता प्रदान की गई है।
ओवरलैपिंग डिफॉल्ट रूप से हो सकती है,
लेकिन साथ ही प्रत्येक एलिमेंट के लिए इसे z-index और order गुणों,
और उनके कॉम्बिनेशन के माध्यम से एक विशिष्ट क्रम में निर्धारित किया जा सकता है।
ग्रिड में एलिमेंट्स की डिफॉल्ट ओवरलैपिंग
मान लीजिए कि हमारे पास एक ग्रिड है जिसमें एलिमेंट्स एक दूसरे को ओवरलैप करते हैं:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
grid: repeat(6, 1fr) / repeat(6, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
background-color: pink;
grid-column: 1 / 4;
grid-row: 1 / 5;
}
#elem2 {
background-color: orange;
grid-column: 2 / 5;
grid-row: 3 / 6;
}
#elem3 {
background-color: green;
grid-column: 3 / 6;
grid-row: 2 / 4;
}
:
order गुण का उपयोग करके एलिमेंट्स की ओवरलैपिंग ऑर्डर बदलना
अब order गुण को लागू करते हैं,
इसे प्रत्येक चाइल्ड एलिमेंट में सेट करके:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
grid: repeat(6, 1fr) / repeat(6, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
background-color: pink;
grid-column: 1 / 4;
grid-row: 1 / 5;
order: 3;
}
#elem2 {
background-color: orange;
grid-column: 2 / 5;
grid-row: 3 / 6;
order: 2;
}
#elem3 {
background-color: green;
grid-column: 3 / 6;
grid-row: 2 / 4;
order: 1;
}
:
z-index गुण का उपयोग करके एलिमेंट्स की ओवरलैपिंग ऑर्डर
अब z-index गुण को लागू करते हैं,
जो z-अक्ष के साथ एलिमेंट्स के प्लेसमेंट ऑर्डर को
कस्टमाइज़ करने की अनुमति देता है:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
grid: repeat(6, 1fr) / repeat(6, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
background-color: pink;
grid-column: 1 / 4;
grid-row: 1 / 5;
z-index: 1;
}
#elem2 {
background-color: orange;
grid-column: 2 / 5;
grid-row: 3 / 6;
z-index: 3;
}
#elem3 {
background-color: green;
grid-column: 3 / 6;
grid-row: 2 / 4;
z-index: 2;
}
:
प्राप्त परिणाम से जैसा देखा जा सकता है,
z-index गुण का उच्चतम मूल्य
एलिमेंट को कम मूल्य वाले अन्य एलिमेंट्स के ऊपर रखता है।
order और z-index गुणों के कॉम्बिनेशन के साथ एलिमेंट्स की ओवरलैपिंग
यदि हमने z-index और order का उपयोग करके एलिमेंट्स के लिए ऑर्डर बदल दिया है, तो
प्राथमिकता z-index की होगी।
इसके कारण एलिमेंट्स के ऑर्डर को बदला जा सकता है,
लेकिन साथ ही उनकी ओवरलैपिंग पर नियंत्रण नहीं खोया जाता:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
grid: repeat(6, 1fr) / repeat(6, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
background-color: pink;
grid-column: 1 / 4;
grid-row: 1 / 5;
order: 3;
z-index: 1;
}
#elem2 {
background-color: orange;
grid-column: 2 / 5;
grid-row: 3 / 6;
order: 1;
z-index: 2;
}
#elem3 {
background-color: green;
grid-column: 3 / 6;
grid-row: 2 / 4;
order: 1;
z-index: 3;
}
:
प्रैक्टिकल टास्क्स
मान लीजिए कि हमारे ग्रिड में चार एलिमेंट्स हैं:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
grid: repeat(6, 1fr) / repeat(6, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
background-color: pink;
}
#elem2 {
background-color: orange;
}
#elem3 {
background-color: green;
}
#elem4 {
background-color: lightblue;
}
निम्नलिखित उदाहरण के अनुसार सभी एलिमेंट्स को प्लेस करें,
order गुण का उपयोग करके:
और अब पिछली टास्क को हल करने के लिए
z-index गुण को लागू करें।
मान लीजिए कि हमारे ग्रिड में चार एलिमेंट्स हैं:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
grid: repeat(6, 1fr) / repeat(6, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
background-color: pink;
}
#elem2 {
background-color: orange;
}
#elem3 {
background-color: green;
}
#elem4 {
background-color: lightblue;
}
निम्नलिखित उदाहरण के अनुसार सभी एलिमेंट्स को प्लेस करें,
order गुण का उपयोग करके:
और अब पिछली टास्क को हल करने के लिए
z-index गुण को लागू करें।
