一、定位分类
1、static 静态定位 属于正常文档流
如果选择的是这个定位，那么css中的left、right、bottom、top不会发生作用。
2、relative 相对定位，相对原来的位置，别的元素不会挤占其原本空间
left、right、bottom、top也是相对文档流的位置。
3、absolute 绝对定位，别的元素会挤占其原本空间，是相对于他的包含他的元素而言的，就是父级元素而言
相对父元素中有定位的元素进行定位偏移，一直向上寻找到根元素。
4、fixed 固定定位，是相对于浏览器而言
相对于浏览器定位
5、sticky 是relative和fixed的合成体，指的是到一定位置时固定在某位置。
他是针对浏览器边框的，正常情况下在文档流位置，当要滚动出浏览器之后，被限制在定位位置。
二、举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 50px;
height: 300px;
border: 1px solid black;
margin-top: 20px;
}
.one{
position: static;
left: 100px;
}
.two{
position: relative;
left: 10px;
}
.three{
position: absolute;
left: 100px;
}
.four{
position: sticky;
top:10px;
left:200px;
}
.five{
position: fixed;
left: 100px;
top:0px;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
在这个案例中4是粘性定位sticky，所以在向上滚动的时候不会出屏幕，3是absolute脱离了文档流，所以以前的4到3文档流位置。
