static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)
Position的取值：
static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。
fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。
relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。
absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。
1.static(静态定位)
如果没有指定元素的position属性值，也就是默认情况下，元素是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。
说白了，平常我们根本就用不到“position:static”，不过呢，如果有时候我们使用javascript来控制元素定位的时候，如果想要使得其他定位方式的元素变成静态定位，就要使用“position:static;”来实现。
2.fixed（固定定位）
当元素的position属性设置为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。在视野中，固定定位的元素的位置是不会改变的。(对应页面尾代码块1)
3.relative(相对定位)与absolute(绝对定位)
首先设置一个简单的页面用做后续分析(如图)对应页面尾代码块2:
将div2的position属性设置为relative：
<style type="text/css">#container{width: 1000px;margin: auto;}.div1{height: 100px; background-color: royalblue;}.div2{height: 100px;background-color: blueviolet;position: relative;top: 30px;left: 30px;}.div3{height: 100px;background-color: deeppink;}.div4{height: 100px;background-color: deepskyblue;}</style>
定位为relative的元素脱离正常的文档流中,但其在文档流中的原位置依然存在,后面的无定位元素仍然不会“挤上来”。
将div2的position属性设置为absolute：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RaT0iuGy-1595250927012)(images/4-1595248465444.png)]
定位为absolute的层完全脱离正常文档流了，和relative层不同的是，绝对定位元素的前面或者后面的元素会认为这个元素并不存在，即这个元素浮于其他元素上面，它是独立出来的。并且在没有给div设置宽度的情况下设为absolute的层宽度就是其中的内容宽度。
在这里可能大家会发现为什么设置为absolute的层不在container(上图中的黑框)层内，而设置为relative的层还在container(上图中的黑框)层内？请继续看下文分析。
这里一共有4个带有颜色的div，并且4个div都放在id为container的层里
<body><div id="container"><div class="div1">第一个div</div> <div class="div2">第二个div</div><div class="div3">第三个div</div><div class="div4">第四个div</div></div> </body>
container层和div2层的css代码
<style type="text/css">#container{width: 1000px;margin: auto;}.div2{height: 100px;background-color: blueviolet;position: absolute;top: 30px;left: 30px;}</style>
top和left是相对于离它最近且不是static定位的父元素来定位的，在此div2的直接父元素是id为container的层，但有父元素并没有设置position属性，所以div2要继续向上寻找间接父元素，于是找到相对于根元素即body元素来定位。
如果为container层真加position属性：
<style type="text/css">#container{width: 1000px;margin: auto;position: relative;}.div2{height: 100px;background-color: blueviolet;position: absolute;top: 30px;left: 30px;}</style>
效果图：
此时div2层定位时相对的父元素就是container层。
还有一个小知识补充：absolute定位的子元素宽度不会影响父元素的宽，而relative定位的子元素会撑大父元素。分析如下：
我们把div1,div3,div4层去掉，并且为container层设置定位属性为absolute。div2层的定位属性为relative；
<style type="text/css">#container{margin: auto;position: absolute;background-color: hotpink;} .div2{height: 100px;background-color: blueviolet;position: relative;top: 30px;left: 30px;}</style>
效果图：
我们发现代码中没有设置div2宽度，div2层的宽度会等于父元素宽度
为div2层添加宽度，并且删除container层宽度：
<style type="text/css">#container{margin: auto;position: absolute;background-color: hotpink;} .div2{height: 100px;width: 1000px;background-color: blueviolet;position: relative;top: 30px;left: 30px;}</style>
效果图：
本文参考：/weixin_42067967/article/details/80152403；
代码块1:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>fixed</title><style type="text/css">.test{width:60px;height:60px;border:1px solid silver;background-color:#FA16C9;}#div1{position:fixed;/*设置元素为固定定位*/top:100px;/*距离浏览器顶部30px*/left:100px;/*举例浏览器左部160px*/}#div3{position:fixed;/*设置元素为固定定位*/top:100px;/*距离浏览器顶部30px*/right:100px;/*举例浏览器左部160px*/}#div2{width:500px;height:1000px;margin: auto;border:1px solid gray;line-height:600px;background-color:#B7F1FF;font-size: 24px;text-align: center;}</style></head><body><div id="div1" class="test">固定定位的div元素</div><div id="div2">参考层</div><div id="div3" class="test">固定定位的div元素</div></body></html>
<!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 type="text/css">#container{width: 1000px;margin: auto; }.div1{height: 100px; background-color: royalblue;}.div2{height: 100px;background-color: blueviolet;}.div3{height: 100px;background-color: deeppink;}.div4{height: 100px;background-color: deepskyblue;}</style></head><body><div id="container"><div class="div1">第一个div</div> <div class="div2">第二个div</div><div class="div3">第三个div</div><div class="div4">第四个div</div></div> </body></html>
background-color: deepskyblue;}</style>
第一个div 第二个div 第三个div 第四个div ```
