項目中往往需要一種層層遞進(jìn)的陰影遮蓋效果
就像這樣:
目標(biāo)效果
層層遞進(jìn)的陰影效果
通常我們會采取給每個盒子設(shè)置box-shadow
div{
width:100px;
height:100px;
background:#e3e3e3;
border:1px solid #333;
box-shadow:0 0 50px rgba(0,0,0,0.5);
}
結(jié)果并不滿意
直接設(shè)置box-shadow
那是不是通過設(shè)置不同的z-index也可以決定陰影的遮蓋順序呢
div {
width: 100px;
height: 100px;
background: #e3e3e3;
border: 1px solid #333;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}
div:nth-child(2) {
z-index:999;
}
設(shè)置z-index后的結(jié)果
并沒有什么改善
那到底如何才能達(dá)到目標(biāo)效果呢
我們要先去理解z-index
MDN中對z-index的定義
其中明確規(guī)定了
只有當(dāng) position 不為 static 的時候, z-index 才是有效的
所以只要給盒子添加 position: relative 屬性, 就能正常控制陰影效果了
div {
position: relative;
width: 100px;
height: 100px;
background: #e3e3e3;
border: 1px solid #333;
}
div:nth-child(2) {
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
z-index: 999;
}
設(shè)置 position: relative 后
結(jié)論
z-index只在position不為 static 的時候生效
z-index 數(shù)值大的盒子陰影遮蓋 z-index 數(shù)值小的
