Прескочи към основното съдържание Прескочи към навигацията
Допълнения към урока
Учебна програма HTML5 и CSS3
HTML5 и CSS3
4. Фонови изображения и спрайтове

Z-index

Курсове HTML5 и CSS3 Седмица 4 - Фонови изображения и спрайтове
-51,13 € за ВЕЛИКДЕН: Вземи Аула абонамент   183,55 € 132,42 €  ВИЖ ТУК

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

Предишен Следващ

HTML5 и CSS3 В курса ще се научите как да създавате съвременни уеб страници с помощта на HTML и CSS. Това обучение е подходящо за напълно начинаещи и ще ви помогне да усвоите основите на уеб разработката, като научите как да създавате структура и стил на уеб страници.

Z-index – контрол над подреждането в дълбочина

Когато два HTML елемента се окажат на едно и също място, браузърът трябва да реши кой да бъде „отгоре“. По подразбиране това става според реда им в HTML кода – по-късно дефинираният елемент застава над предишния. Свойството z-index ви дава контрол върху тази подредба по оста Z (в дълбочина), но работи само при позиционирани елементи. Ако трябва да запомните едно нещо: без position няма ефект от z-index.

Практически пример стъпка по стъпка

  1. Изберете елемент (например заглавие h2) и му задайте position: relative;.
  2. Добавете отместване, например top: 50px;, за да се застъпи със следващ елемент.
  3. Задайте и на втория елемент position: relative;, за да могат да се припокрият.
  4. Наблюдавайте как браузърът подрежда елементите според реда им в HTML.
  5. Добавете z-index: 1; на елемента, който искате да бъде най-отгоре.

Използвани CSS свойства

  • position – определя начина на позициониране (relative, absolute и др.). Необходимо условие за работа със z-index.
  • top – измества елемента вертикално спрямо нормалната му позиция.
  • z-index – определя подредбата по оста Z; по-голяма стойност означава по-преден слой.

Дискусия към урока