介绍
position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移
Position 属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。
属性
position的属性值共有四个常用的：static、relative、absolute、fixed。
还有三个不常用的：inherit、initial、sticky
详细
- static
默认情况
忽略top、bottom、left、right或者 z-index等声明 - relative
不脱离文档流
不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置
相对原来位置
受top/left/right/bottom的影响
margin与padding会产生影响 - absolute
absolut定位可以使元素脱离文档流
寻找父类至position非static方式定位的祖先类元素
relative和static方式在最外层时是以body标签为定位原点的，而absolute方式在无父级是position非static定位时是以html作为原点定位
绝对定位的元素相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html。
类似于absolute，但不随着滚动条的移动而改变位置 - fixed
fixed定位是指元素的位置相对于浏览器窗口是固定位置
即使窗口是滚动的它也不会滚动，且fixed定位使元素的位置与文档流无关，因此不占据空间，且它会和其他元素发生重叠。 - inherit
- initial
- sticky
可以固定一个部分，然后到了另一个内容，又会固定另外一个部分。
文档流
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。
脱离文档流可能导致的问题
一旦子元素的position为fixed或者是absolute，那么它就会脱离文档流，这样的后果是父元素无法被撑开
解决方法1：在js中设置父元素高度等于子元素的高度。
解决方法2：给父元素强行设置高度。（对于宽度导致的类似问题就强行设置宽度）
top/bottom/left/right的标准
是指子元素的margin外侧和包裹元素的border内侧之间的距离是20px。
引用自：
https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
https://www.cnblogs.com/keyi/p/5817748.html
sticky示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>alink</title>
<style>
body {
margin: 0;
padding: 0;
}
.wrap {
border: 20px solid blue;
}
.header {
position: sticky;
top: 20px;
border: 20px solid red;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
这是头部
</div>
<div class="content">
这是内容部分<br>
这是内容部分<br>
这是内容部分<br>
这是内容部分<br>
这是内容部分<br>
这是内容部分<br>
这是内容部分<br>
这是内容部分<br>
这是内容部分<br>
这是内容部分<br>
这是内容部分<br>
这是内容部分<br>
这是内容部分<br>
这是内容部分<br>
这是内容部分<br>
这是内容部分<br>
</div>
</div>
<div class="wrap">
<div class="header">
这是另一个头部
</div>
<div class="content">
这是另一个内容<br>
这是另一个内容<br>
这是另一个内容<br>
这是另一个内容<br>
这是另一个内容<br>
这是另一个内容<br>
这是另一个内容<br>
这是另一个内容<br>
这是另一个内容<br>
这是另一个内容<br>
这是另一个内容<br>
这是另一个内容<br>
这是另一个内容<br>
这是另一个内容<br>
这是另一个内容<br>
这是另一个内容<br>
这是另一个内容<br>
这是另一个内容<br>
</div>
</div>
</body>
</html>
