在练习中发现的一个z-index的BUG

在练习中发现的一个z-index的BUG

前言

Hi，我又来了，这次的小随笔还挺有意思的，原因是我在一次网页练习的时候，发现了一个比较费解的事情。

随后我把这个疑问发给了老师，老师看了后也是很疑惑。

哈哈哈！看来是个小BUG无疑了。

 

言归正传

这是一个普通的手机页面的编写，在我编写完页面主区的时候，主区与左边的边框阴影被右边的块完美覆盖了！

当时我是懵逼的，接踵而来的是疑惑，最后发展成了崩溃：为什么啊？！

如下图：

 

这是原本的效果，左边的框是有边框阴影的。

但是当我做完右面的畅想套餐时，竟然变成了这样：

 

然后我自己试着改了改代码，试图找找问题，当我试着把左边的盒子增加一个z-index时，奇迹发生了，阴影又出现了！！！~

 

 

 

我在高兴之余，突然又觉得不对劲：“不对啊！z-index老师有讲过只在盒子拥有position定位后才能有效啊？”

我带着这个疑问咨询了老师，刚开始老师以为我用来定位，但是看了我的代码后也懵逼了。[#小朋友你是否有很多问号？]

然后我们查询了z-index的官方解释，然而官方也是说在定位后才可以使用。

这难道真的时bug吗？

最后老师先把罪魁祸首归为了：因为这个主区定义了flex（弹性盒子），所以可能z-index可以被弹性盒使用或兼容。

最终我们也没能解决这个问题，如果有知道的小伙伴，可以留言帮我解惑一下。

非常感谢！~