您可以同时添加
position: relative到div和创建
stackingcontext
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 ></div><div ></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 ></div><div ></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 ></div><div ></div>Filters也可以，但是它们不好
Support
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 ></div><div ></div>
