css中一共有四种定位分别是默认，相对，绝对，固定

页面中显示的结果会是怎样呢？ 图中的黑色边框的就是div3，我们可以看到top：0之后的位置在div1的左上角，但是div1是他父级的父级，但是我们要是给div2设置了position：relative之后会是怎样的结果呢？ 我们可以看到div3现在定位到了div2的左上角，可见absolute在div2是relative定位之后起到了这样的作用，可以尝试一下，非父级是其他的两个定位之后的结果。 4.position：fixed，固定定位，这种定位是相对与浏览器的窗口来定位，我们经常会看到网页中右下角有个回顶部的标记，无论鼠标滑轮怎么滑动他都不会改变他的位置。

现在浏览器中显示出来的结果会是这样的： 图中的黑色边框的是div4，他的上边框现在距离是0，下来给他设置，margin-top:50px或者top:50px都会使div4向下移动50px，同时设置后向下移动100px，如果只设置margin-top:50px后，我们按F12进入开发者环境中可以看到这样的结果 也就是说设置margin-top后这个50px属于盒子模型中的一部分，但是如果我们设置了top：50px后会出现这样的结果 我们可以看到这个50px不属于盒子模型的一部分，他只是用定位来位移了一部分位置，这也就是relative定位下它俩的区别，并且top/right/bottom/left在relative下也可以使用，但是在默认定位下是不起作用的。