从CSS画钟理解层叠上下文

最近新项目刚上手，自己也比较菜，挺忙。抽空在Dribble上找时钟练习CSS的时候，发现了一个令我很困扰的事情。

一个这样的钟表盘，可以明显看到ICON是图片，那就先不做，把表盘做做练习一下CSS。首先是阴影怎么来的就让我困扰了很久。我实在想不明白怎么通过Box-Shadow呈现这样的阴影效果。苦恼中向公司的老司机请教，他淡淡的说：

“你没看出来这所谓的阴影是个长方形吗。”

瞬间感觉自己智商-100.....好吧，原来所谓的阴影是渐变透明长方形，这样瞬间难度就降低N个Level了。

然后坑又来了，正常来说实现阴影部分的重叠只需要使用Z-index即可，但是我不管怎么设置Z-index，阴影部分的重叠总是无法达到我的要求。于是请教老司机，看了张鑫旭的博客，弄了半天终于弄明白了。
于是，顺便写个博客总结一下皮毛。

一.层叠上下文。
最开始我是懵逼的，没听过什么层叠上下文，但是说Z-index，我还是知道的。讲白了就是以你为平面建立一个坐标轴，上下为Y轴，左右为X轴，Z轴则是纵深了。层叠上下文可以理解为有纵深顺序排列的元素这么说应该比较好理解了。

二.层叠水平。
层叠水平决定了同一个层叠上下文元素中元素在Z轴上的显示顺序。而普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。这么说起来比较绕，可以理解为层叠上下文是一个实力很强的人，而层叠水平是他们家养的狗。狗叫的再厉害，打狗还是要看主人，层叠水平闹的再厉害，还是要看层叠上下文元素来决定位置。

三.层叠顺序。
层叠顺序，Stacking order.这就是真正表示Z轴排列顺序的因素了。层叠上下文和层叠水平是概念，而这里的层叠顺序是规则。你可以去理解层叠上下文和层叠水平是什么，而层叠顺序，只需要你遵守。
简单来说，他们之间的顺序可以看这张图（图背下来就可以）

总之，如果不是特别的需求，一般遵守这个图，而在这个图之内的内容，遵循原则：

谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。

后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

最终还是把东西做出来了，放在Demo里了~效果是这样的（点我）

嗯，感觉做了这个东西还是挺有收获的。继续加油。