我希望div1高于div2.我尝试使用z-index但它不起作用.
我试过这段代码：
div {
width: 100px;
height: 100px;
}
.div1 {
background: red;
z-index: 1;
}
.div2 {
background: blue;
margin-top: -15vh;
z-index: 2
}
<div class="div1"></div> <div class="div2"></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;
}
<div class="div1"></div> <div class="div2"></div>
或者你可以使用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;
}
<div class="div1"></div> <div class="div2"></div>
您也可以使用一些随机的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 class="div1"></div> <div class="div2"></div>
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;
}
<div class="div1"></div> <div class="div2"></div>
