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 ගුණාංගය යොදන්න.
