在学习CSS的过程中，遇到了position，于是对其中的四个属性做个总结，方便自己以后查阅，也方便别人做为参考。
Position
position中的四种属性如下
static（静态定位）：默认值，无法使用top,bottom,left,right以及z-index，这种定位方式用margin来改变位置，并且不脱离文档流。
relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。这种定位不脱离文档流，可通过z-index进行层次分级。通俗一点来说，相对于其正常位置进行定位，两个块级元素div的正常位置是这样的：
，相对于这里进行定位
absolute定位（绝对定位）：绝对定位，可以用top/right/bottom/left来控制位置，这种定位脱离文档流，可以理解为跟其他的元素不再一个次元中，absolute是相对于最近祖先非static定位元素来定位的，如果说他的父级定位是默认的，那么他就会继续向上找父级的父级，直到找到非static定位元素为基准点来进行定位，在没有父元素的条件下，它的参照为body
举例：下面的代码会出现什么样的效果呢？
- .div1{
- position: relative;
- top: 50px;
- left: 50px;
- width: 300px;
- height: 300px;
- border: 2px solid red;
- }
- .div2{
- margin-top: 50px;
- margin-left: 50px;
- width: 200px;
- height: 200px;
- border: 2px solid yellow;
- }
- .div3{
- position: absolute;
- top: 0px;
- left: 0px;
- width: 100px;
- height: 100px;
- border: 2px solid black;
- }
- <body>
- <div class="div1">
- <div class="div2">
- <div class="div3"></div>
- </div>
- </div>
- </body>
没错，细心的同学可能已经在脑海中想象出来了
div3发现div2（父级）是static定位元素，然后向上找到了div1元素（父级的父级），相对于div1进行了定位，那么我们要是给div2设置了position：relative之后会是怎样的结果呢？
我们可以看到 div3直接相对于div2（父级元素）进行了定位，定位到了div2（父级元素）的左上角。
fixed定位（固定定位）：固定定位，这种定位是相对于浏览器的窗口进行定位，通常用来显示一些提示信息，比如大多数网站上的右下角都有一个回到顶部的按钮，这种定位脱离文档流，元素的位置通过 left, top, right 以及 bottom 属性进行规定。可通过z-index进行层次分级。
以上是四种定位，我们再来说一下相关知识，不知道大家发现没，四种定位元素除了static元素不能使用top,left,right（这个元素比较特殊，等下最后说为什么）bottom外，其余的三个都能使用这些定位，那么top,left,right,bottom和margin-top,margin-left,margin-right,margin-bottom有什么区别呢？
当设置为top时，我们进入F12中看到的结果是这样的：
我们可以看到这个20px不属于盒子模型的一部分，他只是用定位来位移了一部分位置。
当设置为margin-top时，我们进入F12中看到的结果是这样的：
综上所述，属于不属于盒子模型，便是他们的区别。
最后，小Tip：right只有脱离了文档流的定位元素才能生效。
感谢阅读。
