详解CSS的z-index属性（带图片解析）_html/css_WEB-ITnose

有时候我们会使用CSS中的z-index属性来使某些块状元素更有层次感。

如下图：可以通过z-index实现鼠标居于文字后面，使得网页更有层次感

实现上面效果的代码如下：

    img.x{position:absolute;left:0px;top:0px;z-index:-1}   
这是一个标题
  
默认的 z-index 是 0。Z-index -1 拥有更低的优先级。
    

但是好多刚学习css的新手们，会对z-index属性有些不解，明明自己设置了z-index属性，但是问什么看不到任何效果呢？

要解决这个问题就要去w3c上去看下官方定义：

这里需要特别说明的是：Z-index只能工作在被明确定义了absolute，fixed或relative 这三个定位属性的元素中，如果没有定义position属性，则z-index属性不起作用。

所以Z-index 仅能在定位元素上奏效（例如 position:absolute;）

用下面的代码和图解来给大家做一下对比：

1，代码中没有定义position属性

         学习认识z-index                   #box{            width: 1000px;            height:1000px;            border: 1px royalblue solid;        }        #box1{            background-color: red;            width: 200px;            height: 200px;            z-index: 999;        }        #box2{            background-color: yellow;            width: 200px;            height: 200px;            margin-left: 150px;            z-index: 99;        }        #box3{            background-color: green;            width: 200px;            height: 200px;            margin-left: 300px;            z-index: 9;        }       
    
         我的z-index为999

      
查看更多关于详解CSS的z-index属性（带图片解析）_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did106138