Обычно HTML-страницы считаются «двумерными», потому что текст, изображения и другие элементы располагаются на странице без наложения. Однако, в дополнение к их горизонтальному и вертикальному положению, элементы могут быть расположены вдоль оси z, то есть один поверх другого, используя CSS-свойство z-index. Это свойство определяет уровень стека блока, значение position которого является absolute, fixed или relative.
Положение оси z каждого слоя выражается как целое число, определяющее порядок наложения для рендеринга. По сути, элемент с большим z-index перекрывает элемент с более низким.
Свойство z-index может помочь вам создавать более сложные макеты веб-страниц. Ниже приведен пример, который показывает, как создавать слои в CSS.
.box {
position: absolute;
left: 10px;
top: 20px;
z-index: 2;
}
