Обяснен Z-индекс: Как да подреждаме елементи с помощта на CSS

Винаги съм се борил с CS-свойството z-index. В началото звучи толкова лесно. Елементи с по-висока стойност на z-индекс се показват пред тези с по-ниска стойност на z-индекс. И все пак много пъти съм попадал в ситуации, в които изглежда, че стойността на z-index изобщо не е оказала ефект.

Реших, че ми стига пробите и грешките с z-index и че искам да разбера по-добре. Надявам се, че тази статия може да ви помогне, така че никога няма да се чудите защо z-index не прави това, което очаквате.

Поръчка за подреждане по подразбиране

Нека първо споменем реда по подразбиране, в който браузърът подрежда елементи, когато не е приложен z-индекс:

  1. Основен елемент (елементът)
  2. Непозиционирани елементи в реда, в който са дефинирани
  3. Позиционирани елементи в реда, в който са дефинирани

Непозициониран елемент е елемент със статична стойност на позицията по подразбиране. Позиционираният елемент е елемент с всякаква друга стойност на позицията. Примери за други стойности са: абсолютна, относителна, лепкава или фиксирана.

HTML:

CSS:

/* This is only the CSS that is relevant for the example. For the complete CSS check the links below the pictures. */
.blue, .pink, .orange { position: absolute;}

Определихме зеленото квадратче последно в документа. И все пак се появява зад останалите, защото не е позициониран.

Подреждане с z-индекс

Ако сега искаме да променим реда на подреждане на тези елементи, можем да използваме свойството z-index. Елемент с по-висок z-индекс ще бъде показан пред елемент с по-нисък z-индекс. Едно нещо, което трябва да се отбележи е, че z-index работи само с позиционирани елементи .

.blue, .pink, .orange { position: absolute;}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100; // has no effect since the green box is non- positioned}

Оранжевата кутия с по-висок z-индекс се показва пред синята кутия.

Контекст на подреждане

Да кажем, че добавяме още едно позиционирано поле към оформлението, което искаме да разположим зад розовото поле. Актуализираме нашия код до следното:

HTML:

CSS:

.blue, .pink, .orange, .purple { position: absolute;}
.purple { z-index: 0;}
.pink { z-index: 1;}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100;}

Нашата розова кутия се показва пред лилавата кутия, както се очакваше, но какво се случи с оранжевата кутия? Защо изведнъж е зад синия, въпреки че има по-висок z-индекс? Това е така, защото добавянето на стойност на z-индекс към елемент образува така наречения контекст на подреждане .

Розовото поле има стойност на z-индекс, различна от автоматично, което формира нов контекст на подреждане. Фактът, че той формира контекст на подреждане, влияе върху начина на показване на неговите дъщерни елементи.

Възможно е да се промени редът на подреждане на дъщерните елементи на розовата кутия. Техният z-индекс обаче има значение само в този контекст на подреждане . Това означава, че няма да можем да преместим оранжевата кутия пред синята кутия, защото те вече не са в същия контекст на подреждане.

Ако искаме синята кутия и оранжевата кутия да бъдат част от един и същ контекст на подреждане, можем да определим синята кутия като дъщерен елемент на розовата кутия. Това ще накара синята кутия да се появи зад оранжевата.

Контекстите на подреждане не се формират само при прилагане на z-индекс към елемент. Има няколко други свойства, които карат елементите да формират контекст на подреждане. Някои примери са: филтър, непрозрачност и трансформация.

Да се ​​върнем към предишния ни пример. Синята кутия отново е брат или сестра на розовата кутия. Този път, вместо да добавяме z-индекс към розовото поле, ние прилагаме филтър към него.

HTML:

CSS:

.blue, .pink, .orange { position: absolute;}
.pink { filter: hue-rotate(20deg);}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100;}

Оранжевата кутия все още има по-висок z-индекс от синята, но все още се показва зад нея. Това е така, защото стойността на филтъра накара розовото поле да формира нов контекст на подреждане.

Обобщение

Използвайки z-индекс за позиционирани елементи, можем да променим реда на подреждане по подразбиране.

Когато прилагате определени CSS свойства, елемент може да формира контекст на подреждане. Стойностите на Z-индекс имат значение само в същия контекст на подреждане.

За повече информация относно z-index препоръчвам тази статия. Получих много вдъхновение от него, когато пишех това.

Благодаря за четенето! :)