z-index деген эмне жана ал веб-дамытуу учурунда кантип колдонулат?

z-index — бул CSS өзгөчөлүгү, ал элементтердин Z оӊдо жайгашуусун (stacking) алардын Z оӊдо жайгашуусуна негизделген тартибин аныктайт. Жогорку z-index мааниси бар элементтер төмөн z-index мааниси бар элементтердин үстүндө көрсөтүлөт.

Бул позициялоо менен байланышкан элементтердин (б.а. position өзгөчөлүгү static эмес маанилерди алган элементтер) катмарлашуу тереңдигин башкаруу үчүн колдонулат: relative, absolute, fixed, sticky.

Көп колдонуу пункттары:

• Статикалык позицияланган элементтер (position: static;) катмарлашуу контекстине катышпайт жана z-index-ти эске албайт.
• z-index мааниси жаңы катмарлашуу контекстин түзгөн элементтерге гана колдонулат. Бул контекст, мисалы, position башка маанилерде колдонулганда же башка CSS эрежелери (мис., opacity < 1) колдонулганда түзүлөт.
• Бир эле катмарлашуу контекстинде, жогорку z-index мааниси бар элементтер жогору жайгашат.
• Ичке кирген катмарлашуу контексттери бирдиктүү түрдө жайгаштырылат.
• Эгер z-index так белгиленбесе, катмарлашуу тартиби DOMдогу элементтердин тартибине негизделет.

Колдонуу мисалы:

.box1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2; /* .box2 үстүндө */
}

.box2 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1; /* .box1 астында */
}