筋斗云导航栏踩坑之CSS盒子层次问题（盒子遮挡、事件流冒泡）

我tm是万万没想到这么简单的JS demo会踩坑，而且踩坑的点是在CSS盒子层次的问题。经过逐行对照案例的JS、HTML、CSS，才发现是我CSS少了一句position:absolute，导致原本期望在上面的盒子（ul）被另一个绝对定位的盒子（span.cloud）压住。

简化了一下代码：

    
    
    
    
    



    

        
        
        
        
        

            
abcde
            
abcde
            
abcde
            
abcde
            
abcde
            

        
        
        
    
    

目标：正常的、不会干扰JS代码的盒子层次，应该是：nav在最底部，往上是cloud，再往上是ul，ul的子元素li自然更高一点。主要是ul在盒子层次上要比cloud高，层次上能够遮挡；同时注意视觉上是透明的，可以看到底下的cloud。

验证：当然，上面说的都是盒子堆叠的层次，要验证这个层次是否正确，还得利用事件流父子层次（mouseover/mouseout监听并打印事件的target）。
如果盒子堆叠的层次正确，将鼠标移动到ul、li上只会触发nav、ul、li、a，而不会触发cloud，因为ul和cloud是兄弟而且要把cloud压在下面。形成的冒泡事件流就是：a->li->ul->nav。
注意，即使li有高度而ul无高度（li浮动、应该clearfix或强制给ul设置高度），li是不能代替ul去压住cloud的。这时候冒泡事件流：a->li/cloud->nav，混杂了cloud进来，cloud反而会压住li、a，从而导致li触发的mouseover退出转为mouseout。