我们一起来学习CSS的三种定位

写在前面：学习CSS定位的总结和心得，望互相学习讨论，请多多指教。

现在开始我的表演^-^：

CSS中的三种定位：
    position:relative;  // 相对定位
    position:absolute;  // 绝对定位
    position:fixed;    // 固定定位

实验原始代码：

    .box1{
        width: 200px;
        height: 200px;
        background-color: #33ccff;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: #ff6699;
    }
    .box3{
        width: 200px;
        height: 200px;
        background-color: #ff6600;
    }

原始效果展示：

一、相对定位 [position:relative;]

相对自己原来位置进行位置调整，即以原先位置为参照物，微调元素位置。

为了便于理解，做以下实验： 
    我们现在将盒子2进行相对定位，并向下和向右进行了位置调整。   
    .box2{
        position: relative;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        left: 200px;
        top: 200px;
    }
   

我们可以看到，盒子2进行了位置的调整，
但是原先所在位置依然空出，
这就是相对定位不脱离标准文档流的具体体现。
我们把盒子具象化为人，
即可以理解为人还在原来的位置上，但是神却跑去其他地方了。

相对定位的用途：
    1）可微调元素位置；
    2）可做绝对定位的参考。

二、绝对定位 [position:absolute;]

绝对定位较相对定位更灵活，绝对定位之后会脱离标准文档流。
为了便于理解，我们做如下实验：
    .box2{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        left: 200px;
        top: 200px;
    }

可以看到，因为盒子2的绝对定位脱离标准流，
盒子3占据了原先盒子2所在位置。
另外盒子2的参考点发生了改变，
我们通过以下实验进行理解：

（1）用top描述时的参考点：

变化1：
    .box2{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        left: 50px;
        top: 50px;
        }

变化2：
    .box2{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        left: 200px;
        top: 200px;
        }
    

变化3：
    body{
        height: 1000px;
    }
    .box2{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        left: 400px;
        top: 400px;
        }

不滚动滚动条：

滚动页面：

   
通过实验变化1、2、3的移动对比，我们可以发现，
此时绝对定位移动的参考点是在左上角，为了进一步确定，
变化3进行了滚动页面，对比之后我们可以发现，
绝对定位之后，top属性的移动参照点是页面的左上角。

（2）用bottom描述时的参考点：
变化1：
    .box2{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        left: 50px;
        bottom: 50px;
    }
    

变化2：
    .box2{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        left: 200px;
        bottom: 200px;
    }
   

变化3：
     .box2{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        left: 400px;
        bottom: 400px;
    }   
   不滚动滚动条：
   

   滚动页面：
   

通过实验变化1、2、3的移动对比，我们可以发现，
此时绝对定位移动的参考点是在左下角，
为了进一步确定，变化3进行了滚动页面，
对比之后我们可以发现，
绝对定位之后，bottom属性的移动参照点是屏幕首屏显示页面的左下角。

另外，因为绝对定位之后脱离标准流，
因此margin: 0 auto;的居中方法就失效了，
我们可通过其他方法来实现居中，
下面仅简单实现一种水平居中。
    我们做以下实验，实现绝对定位之后的水平居中：
        .box1{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #33ccff;
        // 如下方式实现
        left: 50%;
        margin-left: -100px;
    }
    

总结：

1、绝对定位后会脱离标准流；
2、由top属性设置的参照点为页面的左上角；
3、由bottom属性设置的参照点为首屏页面左下角。
4、水平居中简单实现：left:50%; margin-left:负宽度的一半。

三、固定定位 [position:fixed;]

固定定位的参照物是浏览器的窗口，
滚动页面时始终固定在浏览器的相对位置而不发生位置变化，
并且会脱离标准文档流。
为了便于理解，我们做如下实验：
   
        .box2{
        position: fixed;
        width: 200px;
        height: 200px;
        background-color: #ff6699;
        }

不滚动页面：

滚动页面：

关于绝对定位后续将有更深入的理解，
这一次的学习分享就到这里了，欢迎大家一起交流，再相会~
Github请戳:https://github.com/Hwj1220