"消失的box-shadow"还是"不应该出现的box-shadow"🙄唉?奇了怪了,我的box-shadow呢?刚才

问题描述

QQ录屏20220718203051.gif

🥛 html结构

    <div>
      <div class='li'>a</div>
      <div class='li'>b</div>
      <div class='li'>c</div>
      <div class='li'>d</div>
      <div class='li'>e</div>
      <div class='li'>f</div>
    </div>

🥛 css代码

.li{
  height:20px;
  width:200px;
}
.li:nth-child(odd){
  background-color: #1989Fa;
}
.li:hover{
  box-shadow: 3px 3px 12px rgba(0, 0, 0.5);
}

🥛 唉?奇了怪了,我的box-shadow呢?刚才放在这,这么大一块的!怎么没了啊🤔

正常的

消失的box-shadow

问题研究

第一反应的错误方向❌

🥛 下面是我的错误思考

哎?好像是box-shadow被挡住了哎,那我提高下z-index试试

既然要设置z-index,而z-index又只能在定位元素上奏效,于是

.li:nth-child(even){
  position: relative;
  z-index: 999;
}

当当当当! "大功告成"!(并不完全是)

正确思考✔

🥛 当我把问题发给BIN哥,经过BIN哥的测试,终于发现了问题所在.

因为HTML中的根元素<html></html>本身就具有层叠上下文，称为“根层叠上下文”

而且并没有position设置(或者其他属性设置,不一一举例),所以没有产生新的层叠上下文

产生的堆叠就是元素在HTML中出现的顺序,正常来讲box-shadow底部是会消失不见(被遮挡)

所以问题并不是为啥box-shadow消失了,而是box-shadow怎么出现了.

所以正确的解法可以是在hover的时候加个position,并且可以不设置z-index

position: relatice/absoulte/fixed; 这些就相当于 z-index:auto;

看层叠顺序图,z-index:auto比block块状水平盒子层级高

.li{
  height:20px;
  width:200px;
}
.li:nth-child(odd){
  background-color: #1989Fa;
}
.li:nth-child(even){
  background-color: #fff;
}
.li:hover{
  position: relative;
  box-shadow: 2px 2px 2px 30px rgba(0, 0, 0.5);
}

QQ图片20220718220829.png

于是我们的box-shadow就出来啦✔

坑点

🥛 哎,那为啥之前的box-shadow会出现呢?🤨

原来啊我在偶数行并没有设置背景颜色😂

MDN文档中写道如果不设background-color默认值是transparent,并且不会继承

所以之前能出现是因为颜色透明导致没有挡住box-shadow(b的背景颜色是透明的!)😑