咱们一块儿来学习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;
    }

原始效果展现：

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

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

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

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

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

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;
        }

不滚动滚动条：

滚动页面：

经过实验变化一、二、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;
    }   
   不滚动滚动条：

滚动页面：

经过实验变化一、二、3的移动对比，咱们能够发现，
此时绝对定位移动的参考点是在左下角，
为了进一步肯定，变化3进行了滚动页面，
对比以后咱们能够发现，
绝对定位以后，bottom属性的移动参照点是屏幕首屏显示页面的左下角。

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

总结：

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

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

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

不滚动页面：

滚动页面：

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