Регулиране на подреждането на елементи по Z оста в CSS

Редът на подреждане на елементите може да се регулира с помощта на свойството z-index, което приема като стойност цели положителни или отрицателни числа, или нула. Свойството работи само за елементи, за които стойността position е зададена като absolute, fixed или relative.

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

Нека променим реда на подреждане на елементите от предишния пример. За това на първия елемент ще зададем z-index по-голям, отколкото на втория, например, ето така:

css#elem1 {
  z-index: 2;
}
#elem2 {
  z-index: 1;
}

Резултат от изпълнението на кода:

Задание 1

Повторете страницата по дадения образец:

Задание 2

Повторете страницата по дадения образец: