CSS'teki z-index мүлк кандай жоопкерчиликке ээ?

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

Негизги пункттар:

• Тек гана жайгаштырылган элементтерге колдонулат (position: relative, absolute, fixed, sticky).
• Баасы сан болушу мүмкүн (оң, терс же нөл).
• Автоматтык баа (auto) DOM дарагындагы тартипке ылайык келет.
• Терс z-index маанилери элементти ата-эне жана анын мазмунунун төмөн жайгаштыра алат.
• z-index катмарлашуу контекстин (stacking context) түзөт. Бир эле контексттеги элементтер z-index боюнча тартиптелет, бирок бүтүндөй контекст башка контексттерге салыштырмалуу бирдик катары иштейт.

Стандарттык катмарлашуу тартиби (z-index жок):

1. Негизги элементтин фон жана чектери.
2. Терс z-index менен жайгаштырылган элементтер.
3. Нормал агымдагы блок элементтери.
4. Флотацияланган (float) элементтер.
5. Нормал агымдагы inline элементтери.
6. z-index: auto же z-index: 0 менен жайгаштырылган элементтер.
7. Позитив z-index менен жайгаштырылган элементтер.

Мисал:

/* style.css */
.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Жогорку катмарда */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Төмөнкү катмарда */
}

<!-- index.html -->
<div class="box red"></div>
<div class="box blue"></div>

Бул учурда, кызыл блок (z-index: 1) көк блоктун (z-index: 0) үстүндө болот.