CSS z-index overlapping sort

One, z-index syntax and structure

z-indexThe higher the number, the higher the front, and the value must be an integer and a positive number (a positive integer).

div{
    
    
  z-index:100
}

Note: The value of z-index does not follow the unit

Two, z-index use conditions

z-indexIn use absolute positioning position:absoluteunder the conditions of use of property in order to use.
Usually CSS allows different object boxes to overlap in different orders, and CSS is about z-indexstyle attributes.

Three, case

1. Z-index overlapping sequence case

• To facilitate observation, set 3 DIV boxes, set different CSS background colors, and set the same CSS height and CSS width.
• Set the background color separately) to black, red, and blue. CSS width is 300px, css height is 100px.

css code (without z-index attribute)

.div css5 {
    
    
	position: relative;
}

.div css5-1,
.div css5-2,
.div css5-3 {
    
    
	width: 300px;
	height: 100px;
	position: absolute;
}

.divcss5-1 {
    
    
	/* 黑色*/
	background: #000;
    left: 10px;
    top: 10px
}

.divcss5-2 {
    
    
	/* 红色*/
 	background: #F00;
    left: 20px;
    top: 20px
}

.divcss5-3 {
    
    
	/* 蓝色*/
	background: #00F;
	left: 30px;
	top: 30px
}

css code (plus z-index attribute)

.div css5 {
    
    
	position: relative;
}

.div css5-1,
.div css5-2,
.div css5-3 {
    
    
	width: 300px;
	height: 100px;
	position: absolute;
}

.divcss5-1 {
    
    
	/* 黑色*/
	background: #000;
	z-index: 10;
    left: 10px;
    top: 10px
}

.divcss5-2 {
    
    
	/* 红色*/
 	background: #F00;
 	z-index: 20;
    left: 20px;
    top: 20px
}

.divcss5-3 {
    
    
	/* 蓝色*/
	background: #00F;
	z-index: 15;
	left: 30px;
	top: 30px
}

2. Case description

• All three boxes use the absolute positioning attribute position style, and set the same height and width styles. In order to facilitate the observation of CSS, use the left and right attributes and assign different values, so that they are patchy

The Div css5-1 box background is black, z-index:10

The Div css5-2 box has a red background, z-index:20

The background of the Divcss5-3 box is blue, z-index:15

• In order to be able to see the first box z-index: 10, so it overlaps on the bottom layer, while the second box z-index: 20, the value is the largest, so the top layer overlaps, the third box is set z-index: 15 and centered
• In the actual DIV+CSS layout, CSS needs absolute positioning style, and can use left and right for positioning, and achieve layer overlapping order arrangement through different z-index values