使用z-index将div置于另一个div之上

使用z-index将div置于另一个div之上

您可以同时添加

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>