position属性是CSS中比较重要也比较难以理解的属性，下面我就来谈谈我自己的理解吧！
position属性的取值有：
1.static（默认值，块级元素和内联元素按照正常的方式进行排列）
2.relative（相对定位）
relative相对定位是指相对自己原来的位置定位，而且它不会脱离正常的文档流，也就是还是会占据网页中的位置
当设置left和top时，元素会以窗口的左上角为原点，设置left就是向x轴正半轴移动，设置top就是向y轴的负半轴运动，如下图
同理，设置right和bottom时，也是相对于左上角，设置right时会沿着x轴负半轴运动，设置bottom时会沿着y轴正半轴运动
这里有一个等价的公式：
bottom : 50px=top : -50px
right : 50px=left : -50px
3.absolute（绝对定位）
绝对定位要比相对定位复杂，设置了绝对定位的元素会脱离正常的文档流，不再占有页面的位置
用上面relative的坐标轴的方法来解析absolute就是
- 同时设置left和top时，是相对与窗口的左上角进行定位，即
- 同时设置right和top时，是相对窗口的右上角进行定位，即
- 同时设置left和bottom时，是以窗口的左下角为原点进行定位
- 同时设置right和bottom时，以窗口右下角为坐标原点
这就是和relative最大的不同的地方了，relative都是以左上角为原点，主要原因还是因为relative的相对对象是它自己本身，而元素在没有设置任何定位属性时，默认的就是在左上角。
还有一点需要注意的是，绝对定位不受父元素的高度的影响，也就是就算父元素设置了一定的高度，绝对定位还是会相对于窗口的底部进行定位，而不是父元素的底部进行定位。
- relative和absolute在有父元素的情况下的不同点
如果给父元素设置边距，没有设置定位时，relative会继承父元素的边距，absolute就不会，比如下面的例子：
.per{
width: 300px;
height: 300px;
background-color: gray;
margin-left: 50px;
margin-top: 50px;
}
.div1{
width: 100px;
height: 100px;
background-color: pink;
position: relative;
right: 50px;
bottom: 50px;
}效果是
解释一下，如果子元素没有继承父元素的边距的话，子元素就会有一部分隐藏进浏览器中，根据relative的用法可以知道，而这里子元素全部出来了，就说明子元素受到了父元素的影响；
如果把relative改成absolute的话，就会出现下面这种结果
从上图可以看出子元素没有受到父元素的影响。
如果父元素设置了定位时，它们俩就都会受到父元素的影响，比如给父元素设置position为relative，left：50px;top：50px;时，就会产生下面的结果
子元素设为relative时：
子元素设为absolute时：
这里的absolute就是相对于父元素进行定位了。
4.fixed（固定定位）
fixed会使元素脱离正常的文档流，拥有层级的概念，如果一个元素设置了fixed定位，它就不会随着页面的滚动而动。
它进行定位的时候也是基于窗口的四个角，和absolute差不多，但是它和absolute也有不同的地方，就是当父元素设置了定位属性时，absolute属性会相对于父元素进行定位，而fixed不会，它还是会按照自己的方式进行定位。
5.inhert（继承）
这个属性是用来继承父元素的定位属性，如果父元素没有设置任何属性，子元素也没有任何属性。
好了，我的总结就到这里了，如果有什么问题，欢迎在评论下方进行回复，我们可以一起讨论！