一、定位
position属性
**static：**默认值，没有定位
**relative：**相对定位
**absolute：**绝对定位
**fixed：**固定定位
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width:200px;
height:100px;
background-color: green;
}
#div2{
/*position:absolute;*/ /*绝对定位*/
position:relative; /*相对定位*/
left:100px;
top:100px;
width:200px;
height:100px;
background-color: pink;
}
</style>
</head>
<body>
<br><br><br><br><br><br>
<div id="div1">绿色</div>
<div id="div2">粉色</div>
</body>
</html>
二、z-index属性
调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系。
z-index值大的层位于其值小的层上方
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
z-index:1;
position:absolute;
left:120px;
top:120px;
width:200px;
height:100px;
background-color: green;
}
#div2{
zoom:0.5;
z-index:2;
position:absolute;
left:100px;
top:100px;
width:200px;
height:100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="div1">绿色</div>
<div id="div2">粉色</div>
</body>
</html>