Контрола на слоењето на елементи по Z-оската во CSS

Редоследот на слоење на елементи може да се контролира со помош на својството z-index, кое ги прифаќа како вредности позитивни или негативни цели броеви, или нула. Својството работи само за елементи кај кои вредноста position е зададена како absolute, fixed или relative.

При користење на ова својство, правилото за слоење на елементи е следно: погоре ќе биде оној елемент чија вредност z-index е поголема.

Ајде да го смениме редоследот на слоење на елементите од претходниот пример. За да го направиме ова, на првиот елемент ќе поставиме z-index поголем, од оној на вториот, на пример, вака:

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

Резултат од извршувањето на кодот:

Задание 1

Повторете ја страницата според овој пример:

Задание 2

Повторете ја страницата според овој пример: