html阴影被遮挡，关于css3的阴影遮盖问题的⼩研究今⽇在写⼀个阴影效果的时候遇到了⼀个⼩问题，不多说，上代码
div {
width: 100px;
height: 100px;
background: #e3e3e3;
border: 1px solid #333;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}
可以看到，下⽅的阴影总被遮挡，但如果我想要
这种效果应该怎么实现呢
刚开始我想到的是z-index，是不是改⼀下z-index的值就可以正常显⽰了呢，我们试试，将第⼆个div的z-index设为999
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;
}
结果这样:
box shadow怎么设置果然毫⽆效果，于是我尝试使⽤在第⼆div后⾯加⼀个::after，给他加⼀个阴影，并且把原阴影去除，以便观察div {
width: 100px;
height: 100px;
background: #e3e3e3;
border: 1px solid #333;
}
div:nth-child(2)::after {
display: block;
content: '';
width:100px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
height: 20px;
}
结果如下
虽然阴影显⽰出来了，但是还是被第三个div遮盖，那如果把它绝对定位，抽离⽂本流试试呢
div {
width: 100px;
height: 100px;
background: #e3e3e3;
border: 1px solid #333;
}
div:nth-child(2)::after {
position: absolute;
display: block;
content: '';
width:100px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
height: 10px;
}
确实有效果了，但是::after如果不设置⾼好像就⽆法显⽰，但是思路来了，是不是因为position的原因呢，于是我马上把所有的div都设置成relative，并且把第⼆个设置为z-index:999，看效果
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;
}
刷新，哈，好了
那是不是当position为absolute的时候也⼀样有效呢，试试div {
position: absolute;
width: 100px;
height: 100px;
background: #e3e3e3;
border: 1px solid #333;
}
div:nth-child(2) {
top: 200px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
z-index: 999;
}
div:nth-child(3) {
top: 300px;
}
⼀样可以
所以阴影的遮盖顺序是当元素的 position 为 relative 或者 absolute 时, z-index ⼤的遮盖 z-index ⼩的第⼀次写⽂章，不专业的地⽅，轻喷~轻喷~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。