z-index ගුණය

z-index ගුණය මූලද්‍රව්‍ය කිහිපයක් එකිනෙකා මත අතිච්ඡාදනය වූ විට කවරා ඉහළින් පවතිනු ඇත්දැයි සකස් කරයි.

වාක්‍ය රචනා ක්‍රමය

cssතෝරන්නා {
  z-index: අංකය | auto;
}

අංකය පූර්ණ සංඛ්‍යාවක් විය යුතුය, ධන හෝ ඍණ විය හැකිය. ශුන්‍ය විය හැකිය.

අගයන්

පෙරනිමි අගය: auto.

උදාහරණය

මෙම උදාහරණයේ දී, බ්ලොක් HTML කේතයේ අනුපිළිවෙලට එකිනෙකා මත අතිච්ඡාදනය වේ (z-index නියම කර නැති අතර පෙරනිමි අගය ලැබේ - auto). පළමු බ්ලොක් එක ඉතා පහළින් පවතිනු ඇත (රතු), අවසාන එක - ඉහළින් (කොළ):

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

css#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 සහිත බ්ලොක් එක ඉහළින් පවතිනු ඇත):

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

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

Результат: