CSS Layers (Layers)

CSS z-index attribute can be used in conjunction with the position attribute to create layer effects like Photoshop.

The z-index attribute stacks elements in layers

We usually consider an HTML page as a two-dimensional page because text, images, and other elements are arranged on the page without overlapping. However, in addition to their horizontal and vertical positions, CSS z-The index attribute stacks boxes along the z-axis, that is, one stacks on top of another. This attribute specifies a box, whose stacking levelPositionvalue is one of the following: absolute, fixed, or relative.

The z-axis position of each layer is represented by an integer indicating the stacking order of rendering. A larger z-index element overlaps the element with a lower index.

A z-The index attribute can help you create more complex web layouts. Here is an example of how to create layers in 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;
}

The effect after running is as follows:

We use z-index overlap order style, in the actual DIV+When laying out CSS, we need absolute positioning styles, and we can use left and right for positioning, through different z-The index value implements the layer overlap and order of arrangement.