CSS / Z-index ба stacking context

Z-index ба stacking context

Вэб хуудас нь хавтгай биш — элементүүд гүн буюу Z тэнхлэгт давхарлана. z-index тэр давхарлалтыг удирдана.

z-index яаж ажилладаг вэ?

z-index тоо их байх тусам элемент дээр харагдана:

css

.дор {
  position: relative;
  z-index: 1;
}

.дээр {
  position: relative;
  z-index: 2; /* энэ дээр харагдана */
}

Чухал: z-index нь position тодорхойлогдсон элементэд л ажилладаг:

css

/* z-index АЖИЛЛАХГҮЙ — position тодорхойгүй */
.ажиллахгүй {
  z-index: 999;
}

/* z-index АЖИЛЛАНА */
.ажиллана {
  position: relative; /* эсвэл absolute, fixed, sticky */
  z-index: 999;
}

Анхдагч дараалал

z-index тодорхойгүй байхад HTML-д хожим бичигдсэн элемент дээр харагдана:

html

<!-- .хоёр нь .нэгний дээр харагдана -->
<div class="нэг">Нэг</div>
<div class="хоёр">Хоёр</div>

z-index-ийн хэрэглээ

css

/* Давхардсан давхаргын тогтолцоо */
.дэвсгэр {
  z-index: 0;
}
.агуулга {
  z-index: 10;
}
.navbar {
  z-index: 100;
}
.dropdown {
  z-index: 200;
}
.modal {
  z-index: 1000;
}
.tooltip {
  z-index: 1100;
}

Тогтмол тоо ашиглахаас илүү үет тоо (10, 100, 1000) ашиглах нь дараа нэмэлт оруулахад хялбар.

Stacking context — давхарлалтын орон зай

Stacking context гэдэг нь элемент болон түүний хүүхдүүд нэг нэгж болон давхарлагддаг систем юм. Stacking context дотрох z-index зөвхөн тэр context дотор л ажилладаг.

Stacking context үүсгэдэг property-нүүд

css

/* Эдгээрийн аль нэг нь stacking context үүсгэнэ: */

.context {
  position: relative;
  z-index: 1; /* position + z-index хосолсон үед */
}

.context {
  opacity: 0.99; /* 1-ээс бага opacity */
}

.context {
  transform: translateZ(0); /* ямар ч transform */
}

.context {
  filter: blur(0); /* ямар ч filter */
}

.context {
  isolation: isolate; /* шууд context үүсгэх */
}

.context {
  will-change: transform; /* будущ өөрчлөлтийн зарлал */
}

Нийтлэг z-index асуудал

Асуудал 1: z-index ажиллахгүй байна

css

/* АСУУДАЛ — position тодорхойгүй */
.tooltip {
  z-index: 9999; /* ажиллахгүй! */
}

/* ШИЙДЭЛ */
.tooltip {
  position: absolute; /* эсвэл relative, fixed */
  z-index: 9999;
}

Асуудал 2: Stacking context-ийн хаалт

css

/* АСУУДАЛ */
.карт {
  position: relative;
  z-index: 1;
  transform: translateY(0); /* ← stacking context үүснэ! */
}

.карт .dropdown {
  position: absolute;
  z-index: 9999; /* .карт-ын дотор л ажиллана — гадагш гарахгүй */
}

css

/* ШИЙДЭЛ — transform-ийг өөр элементэд шилжүүлэх */
.карт-wrapper {
  transform: translateY(0); /* transform энд */
}

.карт {
  position: relative;
  z-index: 1;
  /* transform энд байхгүй — stacking context үүсгэхгүй */
}

css

/* АСУУДАЛ */
.modal {
  position: fixed;
  z-index: 1000;
  opacity: 0.98; /* ← stacking context! */
}

.modal .datepicker {
  z-index: 9999; /* modal-ын context-д хязгаарлагдана */
}

/* ШИЙДЭЛ — opacity-г хүүхэд элементэд тавих */
.modal {
  position: fixed;
  z-index: 1000;
}

.modal-дотор {
  opacity: 0.98; /* datepicker-аас тусдаа элементэд */
}

Асуудал 4: z-index тоогоор тэмцэл

css

/* МУУГААР ХИЙСЭН — тоогоор тэмцэх */
.нэг {
  z-index: 9999;
}
.хоёр {
  z-index: 99999;
}
.гурав {
  z-index: 999999;
}

/* САЙНААР ХИЙСЭН — тогтолцоо */
:root {
  --z-base: 0;
  --z-дотор: 10;
  --z-navbar: 100;
  --z-dropdown: 200;
  --z-modal: 1000;
  --z-tooltip: 1100;
}

.navbar {
  z-index: var(--z-navbar);
}
.dropdown {
  z-index: var(--z-dropdown);
}

isolation: isolate

Stacking context-ийг шууд үүсгэх хамгийн цэвэр арга:

css

/* Энэ элемент болон хүүхдүүд нь тусдаа давхарлалтын орон зайд байна */
.тусдаа-context {
  isolation: isolate;
}

Хэзээ хэрэглэх: Компонент дотрых z-index-ийг гаднаас тусгаарлах хэрэгтэй үед.

css

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-navbar, 100);
  background: rgba(11, 17, 32, 0.9);
  backdrop-filter: blur(12px);
}

/* Dropdown */
.dropdown-container {
  position: relative;
}

.dropdown-цэс {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown, 200);
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 8px;
  min-width: 180px;
}

/* Modal */
.modal-дэвсгэр {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1000);
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-хайрцаг {
  position: relative;
  z-index: 1; /* modal-дэвсгэр дотор л — 1001 хэрэггүй */
  background: #0f172a;
  border-radius: 16px;
  padding: 32px;
}

Дараагийн хичээлд:

clip-path ба mask — элементийн хэлбэрийг тайрах, нуух дэвшилтэт аргуудыг судална.

← Өмнөх хичээлOverflow ба scroll Дараах хичээл →Clip-path ба mask