CSS Grid এ এলিমেন্ট ওভারলেপ

গ্রিড সিস্টেমে, গ্রিড এলাকা ছেদ করলে বা নেতিবাচক বাইরের মার্জিন নির্দিষ্ট করলে কিছু এলিমেন্ট অন্যদের উপরে ওভারলেপ করার ক্ষমতা রয়েছে। ওভারলেপ ডিফল্টরূপে ঘটতে পারে, তবে প্রতিটি এলিমেন্টের জন্য 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;
}