CSS ग्रिड में एलिमेंट्स का ओवरलैपिंग

ग्रिड सिस्टम में ग्रिड एरिया के इंटरसेक्शन या नेगेटिव मार्जिन देने पर एक एलिमेंट को दूसरे पर ओवरलैप करने की क्षमता प्रदान की गई है। ओवरलैपिंग डिफॉल्ट रूप से हो सकती है, लेकिन साथ ही प्रत्येक एलिमेंट के लिए इसे z-index और order गुणों, और उनके कॉम्बिनेशन के माध्यम से एक विशिष्ट क्रम में निर्धारित किया जा सकता है।

ग्रिड में एलिमेंट्स की डिफॉल्ट ओवरलैपिंग

मान लीजिए कि हमारे पास एक ग्रिड है जिसमें एलिमेंट्स एक दूसरे को ओवरलैप करते हैं:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#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 गुण को लागू करते हैं, इसे प्रत्येक चाइल्ड एलिमेंट में सेट करके:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#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-अक्ष के साथ एलिमेंट्स के प्लेसमेंट ऑर्डर को कस्टमाइज़ करने की अनुमति देता है:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#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 की होगी। इसके कारण एलिमेंट्स के ऑर्डर को बदला जा सकता है, लेकिन साथ ही उनकी ओवरलैपिंग पर नियंत्रण नहीं खोया जाता:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#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;
}

Результат:

प्रैक्टिकल टास्क्स

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#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;
}

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#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;
}