CSS中的position:absolute与relative

absolute:绝对定位

absolute定位基于距离它最近的，且不是static的父元素的位置。

relative：相对定位

relative是相对于元素所在的文档流中的位置，定位基于原本自身位置。

乍一听，都蒙了，到底谁该基于谁？在开始之前，我们先得弄清楚，什么是文档流。

    <div class="demo1"></div>
    <div class="demo2"></div>
        <style>
        .demo1 {
            width: 100px;
            height: 100px;
            background: black;
            opacity: .5;
        }   
        .demo2 {  
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>

demo1在demo2上面，这就是文档流

情景一：给demo2分别添加属性top=50px
修改如下：

        .demo2 {  
            top:50px;//增设内容
            width: 100px;
            height: 100px;
            background: green;
        }

是的，此时，你会发现，demo2并没有发生移动。
情景二：给demo2分别添加relative的定位属性，并且设定top=50px;
修改如下：

        .demo2 {  
            position:relative;//增设内容
            top:50px;
            width: 100px;
            height: 100px;
            background: green;
        }

是的，demo2这个盒子相对于它原来的位置下移了50px
情景三：给demo2添加absolute的定位属性，并且设定top=50px;

        .demo2 {  
            position:absolute;//修改内容
            top:50px;
            width: 100px;
            height: 100px;
            background: green;
        }

结果如下：

此时，demo2的盒子的top起始位置是按照页面顶端算的，所以会覆盖demo1盒子的一半高度。这是因为absolute会主动找到他的父盒子，以他的父盒子的位置作为基准，并且要求这个父盒子的定位是relative，如果没有，就以最外层的页面为准，此时demo2的盒子脱离的原本给它规定的盒子位置，也就是在最初我们所说的文档流给它规定的demo1下面的位置。
情景四：给demo1添加relative属性，并且给定top=50px,demo2不变

    <div class="demo1"></div>
    <div class="demo2"></div>

    <style>
        .demo1 {
            position:relative;
            top:50px;
            width: 100px;
            height: 100px;
            background: black;
            opacity: .5;
        }   
        .demo2 {  
            position:absolute;
            top:50px;
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>

结果如下：

在这里，我们会看到demo1黑色的盒子是基于relative的下移50px,demo2绿色盒子是基于absolute下移50px，基于relative就是在文档流该有的位置，下移50px。而基于absolute是把最外层页面作为父盒子，以页面顶端作为界限下移50px,并且很明显，基于文档流的relative下移的更多一些。
情景五：css修饰信息不变，让demo1成为demo2的父盒子

    <div class="demo1">
        <div class="demo2"></div>
    </div>
    

运行结果如下：

很明显，此时demo2绿盒子，以定位修饰为relative的黑色盒子的位置为基准，在黑色盒子下移50px的基础上下降50px。
情景五：给demo1也添加父盒子，并且不对demo1进行relative定位，相反给爷爷盒子demo添加relative定位

<div class="demo">
    <div class="demo1">
        <div class="demo2"></div>
    </div>

    <style>
        .demo{
            position:relative;
            top:50px;
            width: 200px;
            height: 200px;
            background: red;
        }
        .demo1 {
            top:500px;
            width: 100px;
            height: 100px;
            background: black;
        }   
        .demo2 {  
            position:absolute;
            top:50px;
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>

运行结果:

情景五总结：
1.爷爷盒子大小是后代盒子的2倍大小，为了便于观察
2.demo1的盒子top设置了500px。是的，你会发现当没有设置position定位的时候，这个属性的增设没有作用和意义。
3.当demo1不在具备定位属性position:relative;时，demo2设置定位属性absolute时，它会继续向上找到那个具备relative的祖宗盒子，没有的话还是依据最外层页面的位置（0,0）作为基准（就是页面最左上角）。如果有具备relative的祖宗盒子，就以他的位置为基准进行位置的设定。
总结：
1.如果你想以最外层的页面作为位置基准，那么不要给你的这个盒子嵌套任何盒子，并且添加定位属性absolute.
2.如果你想根据谁来进行定位，那么那就在以这个为基准的盒子（position:relative）下添加你的盒子，给这个新添加的盒子做定位定位属性absolute。
3.如果你只是想在这个盒子的文档流位置进行top,bottom,left,right设置，那就对这个盒子设定定位position:relative即可。