position 是CSS中非常重要的属性，顾名思义，他是用来指定一个元素在页面上的位置，搞懂了position的属性值对布局的理解会更加透彻。
position一共有5个值，分别是：
static
relative
fixed
absolute
sticky
static 是 position 的默认值，如果元素没有指定position，那么他的值就是默认的static定位。他会按照正常的文档流从上到下，从左到右放置每个元素。
relative、absolute、fiexed 都是相对于某个点进行定位，只是他们的参照点不一样。此外这三种定位都不影响其他元素的位置。
相对定位 relative
相对定位是相对于元素在文档流中的初始位置根据left、top、right、bottom 四个方向进行移动。移动后，原来的空间还被占用，同时可能会覆盖其他的元素。
假设有两个div，初始位置如下：
现在给div1设置如下相对位置：
.div1 {
position: relative;
top: 20px;
left: 20px;
}
相对初始位置距离顶部下移20px，距离左侧向右移动 20px。最终效果图如下
这时，div2的位置没变，而div1往右下方移动后遮盖了div2.
绝对定位 absolute
决对定位是相对于已定位的最近的祖先元素位置进行移动。它会脱离文档流，不占据空间。因此其它元素会移动到该元素原来所在的位置去。因为该元素已经脱离了文档流。同时它还可能会覆盖其它元素，可以通过z-index 属性决定谁显示在最前面，值越大越显示在前面。
注意上面加粗的"已定位"三个字，相对的是“已定位”的祖先元素，意味着祖先元素必须不能是
static属性的定位，否则继续往外层找已定位的祖先，直到根元素
看下面这个例子：
div1 和 div2 是子元素，div0是父元素
<div class="d0">
div0
<div class='d1'>
div1
</div>
<div class="d2">div2</div>
</div>
样式：
.d0{
background-color: cornflowerblue;
width:200px;
}
.d1{
background-color: cadetblue;
width: 100px;
}
.d2 {
background-color: coral;
width: 100px;
}
现在我们把div1使用绝对定位，分别离左侧往右20px，离顶部往下移动2px；
.d1{
background-color: cadetblue;
width: 100px;
position: absolute;
left:20px;
top: 2px;
}
你会发现div1跑到了父元素div0的上面去了，这不和上面说的不一样了。不是说它是相对于最近的祖先元素进行移动吗？按理说我们要的效果是这样的
那是因为父元素div0的定位属性是默认的static，解决办法也简单，我们给div0指定 position: relative 就行。 这时，div1 就是基于父元素div0右下方移动了。
固定定位 fixed
固定定位是绝对定位中的一种特殊情况，它是相对整个视窗viewport（浏览器窗口）进行移动。它表现出来的特点就是，不管页面的元素有多少，它始固定在那个位置。很多网站的导航栏始终置顶在浏览器窗口上面，用的就是基于固定定位实现的。
我们将上面例子的div1的position 改为固定定位 fiexed 后的效果就是这样
position: fixed;
无论怎么改变窗口大小或者拉动滚动条，它总会显示在固定的位置，而其它元素是跟着窗口一起动的。
sticky
sticky 是‘粘贴“的意思，是relative 于 fiexed 的结合体，当元素还在窗口出现时，表现为relative， 当元素欲要离开窗口时，表现为 fiexed，被固定在某个位置。
先看下效果
相信你在一些网页中有体验过这种操作。
<html>
<head>
<style type="text/css">
.container {
position: relative;
}
h1 {
background: green;
margin: 10px;
position: sticky;
position: -webkit-sticky;
top:0px;
}
p{
line-height: 70px;
}
</style>
</head>
<body>
<div class="container">
<div>xxxxxxxxxxxxxx</div>
<div>xxxxxxxxxxxxxx</div>
<div>xxxxxxxxxxxxxx</div>
<h1>第二段</h1>
<div>
<p>这里是文本内容</p>
<p>这里是文本内容</p>
<p>这里是文本内容</p>
<p>这里是文本内容</p>
<p>这里是文本内容</p>
<p>这里是文本内容</p>
<p>这里是文本内容</p>
</div>
</div>
</body>
</html>
总结一下
relative 是相对于元素原来的位置移动， absolute 是相对于定位的父元素移动， fiexed 是相对视窗移动。 相对的“对象”一个比一个大。
参考链接：
https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/
关注公众号「Python之禅」，回复「1024」免费获取Python资源
