html div index,html – 使用z-index将div高于另一个div

您可以添加位置：相对于两个div并创建

stacking context

div {

width:100px;

height: 100px;

}

.div1 {

background: red;

z-index: 2;

position: relative;

}

.div2 {

background: blue;

margin-top: -15vh;

z-index: 1;

position: relative;

}

或者你可以使用transform-style: preserve-3d;所以现在.div1应该放在3D空间中而不是在平面上展平.

div {

width:100px;

height: 100px;

}

.div1 {

background: red;

z-index: 2;

transform-style: preserve-3d;

}

.div2 {

background: blue;

margin-top: -15vh;

z-index: 1;

}

您也可以使用一些随机的transform,如translate或rotate

div {

width:100px;

height: 100px;

}

.div1 {

background: red;

z-index: 2;

transform: translate(1px);

}

.div2 {

background: blue;

transform: translate(1px,-15vh);

z-index: 1;

}

div {

width:100px;

height: 100px;

}

.div1 {

background: red;

filter: brightness(0.4);

z-index: 2;

}

.div2 {

background: blue;

margin-top: -15vh;

filter: brightness(0.4);

z-index: 1;

}