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