于之前的我而言，对position属性就是那种我知道有这个属性，但是具体怎么用，我不知道，就随便用呗，但是，但是，这种思想是非常不对的❗❗❗❗❗为痛改前非，狠心学习，终得这篇博文的问世，欢迎关注、交流🉑🉑🉑🉑🉑
该属性用于指定一个元素在文档中的定位方式，这个属性有static、absoulte、relative、fixed这四个关键字，别急，且让我们一扒究竟，先来点总结：
首先，感谢这位博主做的总结：（别问，问就是懒🤬）
首先基本了解下position的各个属性值：
1、static：默认值。没有定位，元素在正常显示出现（它将忽略top、bottom、left、right、z-index声明）
2、relative：生成相对定位的元素，相对于其正常位置进行移动。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
3、absolute：生成绝对定位的元素，相对于position属性定义为static之外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
4、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
🧐原文链接：https://blog.csdn.net/madman0621/article/details/82431621
可能这个关键字大家用的不多，但是也要说一下💨
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
是的，这些属性，上面提到的什么top，left都没有用！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>致命布局问题</title>
<style type="text/css">
#static{
width: 300px;
height: 300px;
background: pink;
position: static;
}
</style>
</head>
<body>
<div id="static"></div>
</body>
</html>
然后我现在在它的上方我添加一行字：
大家可以看到，static元素也会跟着向下移动了，最后说一次这个属性对 top, right, bottom, left 和 z-index 属性无效。
如果说我现在使用两个呢？
可以看到，没有重叠，因为新添加的东西，和上面的p标签“一样”，属于外来物，就给“它”腾出位置来就好了💫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>致命布局问题</title>
<style type="text/css">
#absolute{
width: 300px;
height: 300px;
background: cadetblue;
position: absolute;
top: 100px;
left: 40px;
}
</style>
</head>
<body>
<div id="absolute"></div>
</body>
</html>
这个属性移动的标准默认就是依据目前文档的边边来移动😃
现在我同样在它上方添加文字，为了对比明显，我添加很多行，大家看看效果：
这其实和“文档流”有关，什么是文档流？
将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。
继续回到刚刚的问题，这个关键字其实就是：元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
使用这个属性就像是“脱离”了文档流，那么就极有可能会重叠，因为你已经不在原本的文档流里了，你是“自由的”个体，你想干嘛你就干嘛：
再精确一点点，我把其中的一个absolute添加另一个的里面：
<div id="absolute">
<div id="absolute"></div>
</div>
效果：
可以看出，先前的两个元素的的确确是重叠了的
这个关键字和static很像，只不过它添加了几个与static不同的属性而已
该关键字生成相对定位的元素，相对于其正常位置进行移动。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定,这就是其中一点与static不同的地方，另外一点就是与absolute的“结合”，上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>致命布局问题</title>
<style type="text/css">
#relative{
width: 800px;
height: 800px;
background: black;
position: relative;
top: 100px;
left: 100px;
}
#absolute{
width: 300px;
height: 300px;
background: red;
position: absolute;
top: 100px;
left: 40px;
}
</style>
</head>
<body>
<div id="relative">
<div id="absolute"></div>
</div>
</body>
</html>
可以看到，absolute没有根据“边边”来移动了，而是根据relative的“边边”来移动，现在将relative换成static，看看区别：
可以看到，absolute元素完全无视了static元素，明明absolute元素是包在了static里面，但是，可以发现，absolute根本就不管，还是保持在自己原本的位置上
这也就是relative和static的区别之二，也是最重要的区别😎，absolute会根据relative去定位
fixed和absolute很像----注意他也会重叠噢
元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。
前面的蓝色部分大家应该都是可以自己理解，实在不理解的，你们上手试试就行，至于后面的部分才是重点，这句话的意思就是
如果说你在定义了fixed的前提下，并且是包裹在relative里面，你不定义类似top/left/bottom等，那么fixed就类似absolute一样，位置会根据relative来变，一旦你设置了top/left/bottom等，那么fixed就会跳出relative，根据body去定位，而不是根据relative！脱离了relative的束缚🐱🏍
敬请期待啦哈哈哈哈下期见
