Слои CSS (Слои)

Атрибут CSS z-index можно использовать вместе с атрибутом position для создания эффекта слоев, как в Photoshop.

Использование атрибута z-index для наложения элементов в слоях

Обычно HTML-страницу считают двумерной, потому что текст, изображения и другие элементы выстраиваются на странице без наложения. Однако, кроме их горизонтального и вертикального положения, можно использовать атрибут CSS z-index для наложения ящиков по оси z, то есть один ящик наложен на другой.ПозицияЗначение может быть одним из следующих: absolute, fixed или relative.

每一层的z轴位置均表示为表示渲染的堆叠顺序的整数。元素具有较大z-index наложается на элементы с более низким z-index.

Атрибут z-index помогает вам создавать более сложные веб-макеты веб-страниц. Вот пример того, как можно создать слои в CSS.

.box{
　　width:　150px;
　　height:　150px;
　　opacity:　0.9;
　　position:　absolute;　　　　　　　　　　　　　　　　　　　　　　　
　　top:　30px;
　　left:　30px;
}
.red{
　　background:　#ff0000;
　　z-index:　1;
}
.green{
　　background:　#00ff00;
　　z-index:　2;
}
.blue{
　　background:　#0000ff;
　　z-index:　3;
}

Эффект после выполнения:

Мы используем стиль расположения z-index для наложения, и при реальном DIV+CSS макете нам нужно использовать стиль абсолютного расположения, и мы можем использовать left, right для позиционирования, а также использовать различные значения z-index для наложения слоев в порядке.