不起眼的z-index却能牵扯出这么大的学问-北风吹雪

z-index在日常开发中算是一个比较常用的样式，一般理解就是设置标签在z轴先后顺序，z-index值大的显示在最前面，小的则会被遮挡，是的，z-index的实际作用就是这样。

但是你真的了解z-index吗？你知道它有什么特性吗？这里先抛出几个名词：[ 层叠顺序（stacking order） ]，[ 层叠上下文（stacking context） ]，[ 层叠水平（stacking level） ]。

先说一下z-index的基本用法：　　

　　z-index 可以设置成三个值：

auto ，默认值。当设置为 auto 的时候，当前元素的层叠级数是0，同时这个盒 不会创建新的层级上下文（除非是根元素，即 ）； 。指示层叠级数，可以使负值，同时无论是什么值，都会创建一个新的层叠上下文； inherit 。父元素继承

z-index只在定位元素中起作用 ，举栗子：

   style  >  
    #box1  {  
        background  :   blue  ;  
        width  :   200px  ;  
        height  :   200px  ; 
     }  
    #box2  {  
        background  :   yellow  ;  
        width  :   200px  ;  
        height  :   200px  ;  
        margin-top  :  -100px  ; 
     } 
       
   style  > 
   div   id  ="box1"  >  div  > 
   div   id  ="box2"  >  div  >      

查看更多关于不起眼的z-index却能牵扯出这么大的学问-北风吹雪的详细内容...