4 причини вашият z-индекс не работи (и как да го поправите)

Z-индексът е свойство на CSS, което ви позволява да позиционирате елементи на слоеве един върху друг. Това е супер полезен и честно казано много важен инструмент, за да знаете как да използвате в CSS.

За съжаление, z-индексът е едно от онези свойства, които не винаги се държат по интуитивен начин. В началото изглежда просто - по-голям z-индекс означава, че елементът ще бъде отгоре на елементи с по-ниски z-индексни числа. Но има някои допълнителни правила, които правят нещата по-сложни. И не винаги можете да поправите нещата, като зададете z-индекс на 999999!

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

Ще прегледаме някои действителни примери на код и ще ги решим. След като прочетете тази статия, ще можете да разберете и избягвате тези често срещани клопки в z-индекс!

Нека да проверим първата причина:

1. Елементите в един и същ контекст на подреждане ще се покажат в реда на външния им вид, като последните елементи ще бъдат поставени върху предишните елементи.

В нашия първи пример имаме сравнително просто оформление, което включва 3 основни елемента:

  • Изображение на котка
  • Бял блок с текст
  • Друго изображение на същата котка

Ето HTML маркера за това:

Meow meow meow ...

В това оформление в идеалния случай искаме белият блок текст да бъде отгоре и върху двете котки.

За да се опитаме да постигнем това, добавихме някои отрицателни полета в CSS за двете изображения на котки, така че те да припокриват малко белия блок:

.cat-top {
   марж-дъно: -110px;
}
.cat-bottom {
   плувка: дясно;
   марж-отгоре: -120px;
}

Изглежда обаче така:

Първата котка наистина е разположена под блока с бяло съдържание, точно както ние искаме. Но второто изображение на котка е разположено отгоре на блока!

Защо се случва това?

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

Дори ако елементите нямат зададен z-индекс, има рима и причина кои ще са отгоре.

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

(Можете да прочетете повече от указанията за поръчка за подреждане в Mozilla Developer Network тук.)

В нашия пример с котките и белия блок те се подчиняват на това правило. Ето защо първата котка е под елемента на белия блок, а белият блок е под втората котка.

Ок, редът за подреждане е добре и добре, но как да оправим CSS, така че втората котка да е под белия блок?

Нека разгледаме втората причина:

2. Елементът няма зададена позиция

Едно от другите указания, които определят реда за подреждане, е дали даден елемент има зададена позиция или не.

За да зададете позиция за елемент, добавете свойството за позиция CSS към всичко друго освен статично, като относително или абсолютно. (Можете да прочетете повече за това в тази статия, която написах.)

Според това правило позиционираните елементи ще се показват отгоре на непозиционирани елементи.

Така че поставянето на белия блок да бъде позиционирано: относително и оставянето на двата котешки елемента нерегулирани ще постави белия блок на върха на котките в реда на подреждане.

Ето как ще изглежда - можете също да си поиграете с Codepen по-горе.

Ура!

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

Но това може да доведе до повече объркване, свързано с z-индекс. Ще разгледаме проблема и решението в следващата част.

3. Задаването на някои CSS свойства като непрозрачност или преобразуване ще постави елемента в нов контекст на подреждане.

Както току-що споменахме, искаме да обърнем долната котка с главата надолу. За да постигнем това, ще добавим transform: rotate (180deg).

.cat-bottom {
   плувка: дясно;
   марж-отгоре: -120px;
   трансформация: завъртане (180deg);
}

Но това води до това, че долната котка отново ще се показва отгоре на белия блок!

Какво по дяволите става тук ??

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

Това означава, че добавянето на трансформацията към .cat-bottom елемента го кара да се държи така, сякаш има z-индекс от 0. Въпреки че изобщо няма своя позиция или z-индекс! (W3.org има някаква информативна, но доста плътна документация за това как работи със свойството непрозрачност)

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

Но тъй като елементът .bottom-cat действа така, сякаш е сравнително позициониран с z-индекс: 0, трансформирайки го, го е разположил отгоре на белия блок.

Решението на това е да зададете позиция: относителна и изрично зададена z-индекс поне на белия блок. Можете да отидете една стъпка по-нататък и да зададете позиция: относителна и по-нисък z-индекс за елементите на котката, само за да сте допълнително безопасни.

.content__block {
   позиция: относителна;
   z-индекс: 2;
}
.cat-top, .cat-bottom {
   позиция: относителна; z-индекс: 1;
}

Според мен, това ще реши повечето, ако не всички по-основни проблеми с z-индекс.

Сега, да преминем към последната ни причина, че вашият z-индекс не работи. Този е малко по-сложен, защото включва елементи на родители и деца.

4. Елементът е в по-нисък контекст на подреждане поради нивото на z-индекс на родителя си

Нека да разгледаме нашия пример за това:

Ето какво имаме: обикновена уеб страница с редовно съдържание и розов страничен раздел с надпис „Изпращане на обратна връзка“, който е разположен отгоре на съдържанието.

След това, когато щракнете върху снимката на котката, се отваря модален прозорец с прозрачно сиво фоново наслагване.

Въпреки това, дори когато модалният прозорец е отворен, страничният раздел все още е отгоре на сивото покритие. Искаме наслагването да се показва над всичко, включително страничния раздел.

Нека разгледаме CSS за въпросните елементи:

.съдържание {
   позиция: относителна;
   z-индекс: 1;
}
.modal {
   позиция: фиксирана;
   z-индекс: 100;
}
.side-tab {
   позиция: фиксирана;
   z-индекс: 5;
}

Всички елементи имат своята позиция, а страничният раздел има z-индекс 5, който го позиционира отгоре на съдържателния елемент, който е на z-индекс: 1.

Тогава модалът има z-индекс: 100, който трябва да го постави отгоре на страничния раздел при z-индекс: 5. Но вместо това модалното наслагване е под страничния.

Защо се случва това?

Преди това се спряхме на някои фактори, които влизат в контекста на подреждането, като например, ако елементът има своята позиция, както и реда си в маркирането.

Но още един аспект на контекста на подреждането е, че дъщерният елемент е ограничен до контекста на подреждането на неговия родител.

Нека разгледаме по-подробно трите въпросни елемента.

Ето маркирането, което имаме:

    

Разглеждайки маркировката, можем да видим, че елементите на съдържанието и страничните раздели са братя и сестри. Тоест, те съществуват на същото ниво в маркирането (това е различно от нивото на z-индекс). А модалът е дъщерен елемент на съдържателния елемент.

Тъй като модалът е вътре в съдържателния елемент, неговият z-индекс от 100 има ефект само в неговия родител - съдържателния елемент. Например, ако имаше други дочервени елементи, които бяха братя и сестри по модал, техните стойности на z-индекс биха ги поставили отгоре или под тях.

Но стойността на z-индекс на тези дъщерни елементи не означава нищо извън родителския, тъй като елементът на съдържанието на родител има своя z-индекс, зададен на 1.

Така че неговите деца, включително модалният, не могат да излязат от това ниво на z-индекс.

(Можете да го помните с тази леко потискаща метафора: детето може да бъде ограничено от родителите си и не може да се освободи от тях.)

Има няколко решения на този проблем:

Решение: Преместете модала извън родителското съдържание и в основния контекст за подреждане на страницата.

Тогава коригираната маркировка ще изглежда така:

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

В този нов контекст на подреждане елементите ще се показват в следния ред, отгоре надолу:

  • модален (z-индекс: 100)
  • страничен раздел (z-индекс: 5)
  • съдържание (z-индекс: 1)

Алтернативно решение: Премахнете позиционирането от съдържанието, така че няма да ограничи z-индекса на модала.

Ако не искате или не можете да промените маркировката, можете да отстраните този проблем, като премахнете настройката за позиция от елемента на съдържанието:

.съдържание {
   // Няма зададена позиция
}
.modal {
   позиция: абсолютна;
   z-индекс: 100;
}
.side-tab {
   позиция: абсолютна;
   z-индекс: 5;
}

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

Въпреки че това върши работа, аз лично бих се обърнал към първото решение.

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

В обобщение

Надявам се, че сте намерили този урок за полезен! В обобщение, повечето проблеми с z-индекс могат да бъдат решени, като следвате тези две насоки:

  1. Проверете дали елементите имат позицията си и номерата на z-индекс в правилния ред.
  2. Уверете се, че нямате родителски елементи, ограничаващи нивото на z-индекс на техните деца.

ресурси:

  • W3.org: Прозрачност: свойството „непрозрачност“
  • W3.org: Посочване на нивото на стека
  • Мрежа за разработчици на Mozilla: Контекстът за подреждане
  • PhilipWalton.com: Какво никой не ти каза за Z-индекс
  • Smashing Magazine: Z-index CSS Property

Искам още?

Прочетете още уроци в моя блог, coder-coder.com.
Регистрирайте се тук, за да получавате имейли за нови статии.
Присъединете се към 25 000+ други - Следвайте @thecodercoder в Instagram.