九、z-index属性

一、本课目标

• 掌握z-index属性的使用及应用场景

我们知道，浮动和定位都可以使得元素的层级提高，那当这两者都发生的时候，到底谁的层级更高呢？就可以用z-index属性来控制。

二、z-index属性

作用：调整元素定位时重叠层的上下位置

• z-inde属性值：整数，默认为0
• 设置了position属性时，z-index属性可以设置各元素之间的重叠高低关系

• z-index值大的层位于其值小的层上方。

  
  
  

  image.png

三、示例代码：

3.1设置层级

    
    
    



    

        

        
京秋魅力 •；相约共赏香山红叶
        

        
时间：11月16日 星期六 8:30
        
地点：朝阳区西大望路珠江帝景K区正门前集合
    

运行结果：

image.png

3.2设置元素透明度

image.png

这两个都一样，那为什么写两条呢？opacity是为了兼容非IE浏览器，filter是兼容IE浏览器（针对IE8及以下版本的浏览器做出兼容）。

注：也可以使用rgba来设置透明度：写法如下：background: rgba(0, 0, 0, 0.5);

四、总结

image.png