z-index ගුණය
z-index ගුණය මූලද්රව්ය කිහිපයක්
එකිනෙකා මත අතිච්ඡාදනය වූ විට කවරා
ඉහළින් පවතිනු ඇත්දැයි සකස් කරයි.
වාක්ය රචනා ක්රමය
තෝරන්නා {
z-index: අංකය | auto;
}
අංකය පූර්ණ සංඛ්යාවක් විය යුතුය, ධන හෝ ඍණ විය හැකිය. ශුන්ය විය හැකිය.
අගයන්
| අගය | විස්තරය |
|---|---|
| අංකය |
පූර්ණ සංඛ්යාව මූලද්රව්ය අතිච්ඡාදනය කිරීමේ අනුපිළිවෙල සකස් කරයි:
මූලද්රව්ය එකිනෙකා මත අතිච්ඡාදනය වූ විට ඉහළින්
පවතින්නේ කුමන එකේ z-index විශාලද යන්නයි.
|
auto |
අතිච්ඡාදනය කිරීමේ අනුපිළිවෙල ස්වයංක්රීයව ගොඩනැගේ: ඉහළින් පවතින්නේ HTML කේතය තුළ පහළින් පිහිටා ඇති මූලද්රව්යයි. |
පෙරනිමි අගය: auto.
උදාහරණය
මෙම උදාහරණයේ දී, බ්ලොක් HTML කේතයේ අනුපිළිවෙලට
එකිනෙකා මත අතිච්ඡාදනය වේ
(z-index නියම කර නැති අතර
පෙරනිමි අගය ලැබේ - auto). පළමු
බ්ලොක් එක ඉතා පහළින් පවතිනු ඇත (රතු), අවසාන
එක - ඉහළින් (කොළ):
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
#div1 {
position: absolute;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
background: red;
}
#div2 {
position: absolute;
top: 60px;
left: 60px;
width: 50px;
height: 50px;
background: blue;
}
#div3 {
position: absolute;
top: 90px;
left: 90px;
width: 50px;
height: 50px;
background: green;
}
:
උදාහරණය
z-index නියම කිරීමෙන් අතිච්ඡාදනය කිරීමේ අනුපිළිවෙල වෙනස් කරමු.
රතු බ්ලොක් එකට - 3, නිල් බ්ලොක් එකට - 2,
කොළ බ්ලොක් එකට - 1. අතිච්ඡාදනය කිරීමේ අනුපිළිවෙල
වෙනස් වනු ඇත (z-index
3 සහිත බ්ලොක් එක ඉහළින් පවතිනු ඇත):
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
#div1 {
position: absolute;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
background: red;
z-index: 3;
}
#div2 {
position: absolute;
top: 60px;
left: 60px;
width: 50px;
height: 50px;
background: blue;
z-index: 2;
}
#div3 {
position: absolute;
top: 90px;
left: 90px;
width: 50px;
height: 50px;
background: green;
z-index: 1;
}
:
