一、本课目标
- 掌握z-index属性的使用及应用场景
我们知道，浮动和定位都可以使得元素的层级提高，那当这两者都发生的时候，到底谁的层级更高呢？就可以用z-index属性来控制。
二、z-index属性
作用：调整元素定位时重叠层的上下位置
- z-inde属性值：整数，默认为0
- 设置了position属性时，z-index属性可以设置各元素之间的重叠高低关系
-
z-index值大的层位于其值小的层上方。
image.png
三、示例代码：
3.1设置层级
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul, li {
padding:0px;
margin:0px;
list-style-type:none;
}
#content {
width:331px;
overflow:hidden;
padding:5px;
font-size:12px;
line-height:25px;
border:1px #999 solid;
}
#content ul{
position: relative;
}
.tipBg, .tipText {
width: 331px;
height: 25px;
position: absolute;
top: 100px;
}
.tipText {
color: #FFF;
text-align: center;
z-index: 1;
}
.tipBg{
background: #000;
/*下面这两句代码是设置透明度*/
opacity: 0.5;
filter:alpha(opacity=50);
}
</style>
</head>
<body>
<div id="content">
<ul>
<li><img src="img/maple.jpg" alt="香山红叶"/></li>
<li class="tipText">京秋魅力 •；相约共赏香山红叶</li>
<li class="tipBg"></li>
<li>时间：11月16日 星期六 8:30</li>
<li>地点：朝阳区西大望路珠江帝景K区正门前集合</li>
</ul>
</div>
</body>
</html>
运行结果：
image.png
3.2设置元素透明度
image.png
这两个都一样，那为什么写两条呢？opacity是为了兼容非IE浏览器，filter是兼容IE浏览器（针对IE8及以下版本的浏览器做出兼容）。
注：也可以使用rgba来设置透明度：写法如下：
background: rgba(0, 0, 0, 0.5);
四、总结
image.png
