css的定位

最近重新整理了一下关于css的position的几个属性，还有相关的应用。
废话不多说，先上图

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

从图中可以看出，position具有五个特殊的属性，已经通用的功能。值得一提是absolute与relative这两个之间具有一定的相似性。
当position的值为非static时，其层叠级别通过z-index属性定义。

绝对定位的元素，在top，right，bottom，left属性未设置时，会紧随在其前面的兄弟元素之后，但在位置上不影响常规流中的任何元素。用这个特性你或许会干这样的事：demo
对应的脚本特性为position。
还有相关的，对position的兼容性也进行了整合

[在这里插入图片描述](https://img-blog.csdnimg.cn/20190705164612181.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pc2Vtb25vX2N0,size_16,color_FFFFFF,t_70)

希望以上能帮助你解决问题。