რა არის z-index და როგორ გამოიყენება იგი ვებ-განვითარებაში?

z-index — ეს CSS თვისებაა, რომელიც განსაზღვრავს ელემენტების გადაფარვის წესს (stacking) მათი Z-ზოლზე მდებარეობის საფუძველზე. მაღალი 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-დან */
}