我想要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>
你可以加position: relative到两个 div 并创建stacking context https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_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; https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style so now .div1应位于3D-space并且在平面上没有压扁。
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 https://developer.mozilla.org/en-US/docs/Web/CSS/transform like translate or rotate https://jsfiddle.net/Lg0wyt9u/127/
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>
Filters https://developer.mozilla.org/en-US/docs/Web/CSS/filter也能工作，但他们有坏处Support http://caniuse.com/#search=filter
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
