像图像处理软件总的图层一样可以对每个layer能够精确定位操作，我们希望当前网页的元素能够像图层一样前后层叠在一起有一个叠加的效果，上面的层能够遮盖以下的层。这个时候用层定位。
操作方法：
（1）通过设定position的值来确定参照物position：static，fixed，relative，absolute
（2）再通过设置top，right，bottom，left，z-index（Z轴方向）来确定参照坐标下的精确坐标
| 属性 | 描述 | 作用 |
|---|---|---|
| static | 默认值 | 没有定位，元素出现在正常的流中，up,bottom,left,right,z-index无效 |
| fixed | 固定定位 | 相对于浏览器窗口进行定位，top，bottom，left，right，z-index有效 |
| relative | 相对定位 | 相对于其直接父元素进行定位，top，bottom，left，right，z-index有效 |
| absolute | 绝对定位 | 相对于static定位以外的第一个父元素进行定位，top，bottom，left，left，right，z-index有效 |
(1) fixed 固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box-fixed{
width:200px;
height:200px;
border:1px solid red;
background-color:#FFEBCD;
overflow: auto;
position:fixed;/*固定*/
top:50px;
left:100px;
}
#box{
width:400px;
height:400px;
border:1px solid red;
background-color:#FFE;
overflow: auto;
}
</style>
</head>
<body>
<div id="box">
box
<div id="box-fixed"> box-fixed</div>
</div>
</body>
</html>
box-fixed设置为fixed，相对于浏览器的位置固定，不随父元素的位置变化
相对定位relative和绝对定位
（1）文档流中的原位置：定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置会保留, 而absolute在文档流中的原位置则会丢失，其他元素将会占据此位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width:200px;
height:100px;
border:1px solid red;
background-color:#FFE;
}
#box-relative{
width:200px;
height:150px;
border:1px solid red;
background-color:#FFEBCD;
position:relative;/*固定*/
top:50px;
left:50px;
}
body{
background-color: blue;
width: 1000px;
height: 800px;
}
</style>
</head>
<body>
<div id="box-relative">relative</div>
<div id="box">box</div>
</body>
</html>
（2）定位参照物：relative定位为直接父元素，而absolute定位为非static的父元素(直到body进行定位)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width:400px;
height:400px;
border:1px solid red;
background-color:#FFE;
/*position:fixed;/*固定*/
margin: 30px;
top:30px;
left:30px;
}
#box-relative{
width:200px;
height:70px;
border:1px solid red;
background-color:#FFEBCD;
position:relative;/*相对父元素怒*/
top:20px;
left:20px;
}
#box-absolute{
width:200px;
height:70px;
border:1px solid red;
background-color:#FFEBCD;
position:absolute;/*相对于非static父元素*/
top:20px;
left:20px;
}
body{
border:1px solid;
width: 500px;
height:500px;
font-size: 21px;
}
</style>
</head>
<body>
<div id="box">
<div id="box-relative"><br><br>relative</div>
<div id="box-absolute">absolute</div>
<br>static
</div>
</body>
</html>
通常将相对定位和绝对定位结合使用：
父元素box1 position：relative
子元素box2 position：absolute
这样一来子元素可以跟随于父元素进行移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
border:1px solid red;
color:black;
}
#boxx1{
width:300px;
height: 200px;
position:relative;
}
#boxx2{
width:99%;
position: absolute;
border-bottom: 0;
}
</style>
</head>
<body>
<div id="boxx1">
<img src="images/Google.png" width="300" height="200">
<div id="boxx2">让我们一起浏览谷歌吧!</div>
</div>
</body>
</html>
