CSS-ში 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) ზევით.