相对定位relative

relative相对定位
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

            .first_relative{
                 position: relative;
                 left: 100px;
                 top: 20px;
                 background: yellow;
            }

将first元素设置为相对定位，left：100px；top：20px； 这里的first元素在移动位置后依旧保持原来的空间，在添加second元素后发现它在first原来的位置后面继续排列着。

Paste_Image.png

relative对absolute的限制

在absolute没有父类元素定位限制的时候，它会以body的左上角为原始坐标。当有relative限制它的时候，absolute会在最近的父类元素框内移动。因此父类元素relative限制了absolute的移动空间。

当父类元素不设置relative限制时，这里的second会以body的左上角开始定位

Paste_Image.png Paste_Image.png

一旦父类元素添加了relative属性，second立刻被限制在黄色框内，这时second不是以body左上角开始定位，而是以黄色框的左上角开始定位。当父类容器移动时，子元素second也要跟着父容器移动，并且保持原先在父容器中的位置

Paste_Image.png

relative相对自身定位

relative根据自身所在的容器使用left、top进行定位，而absolute的定位是相对于最近的定位父类容器，如果父类容器没有设置定位属性，那就根据body进行定位
小红快没有设置任何定位属性，它就处于div容器容器的左上角

Paste_Image.png Paste_Image.png

当给小红快设置position：relative；相对定位时，发现小红快没有任何变化，这是因为relative相对自身的位置进行定位。

Paste_Image.png

例如在这个基础上改变top为50px、left为50px，这时可以看到小红快发生了变化，小红快根据灰色div左上角为原点进行了偏离

Paste_Image.png

当给小红快设置position：absolute；绝对定位时，小红快处于浏览器的最左上角，这是因为它的父级元素div没有要设置任何定位限制absolute。

Paste_Image.png

relative在使用top和margin-top的区别
relative是不脱离文档流的属性，同时在它使用left和top进行定位后保留之前位置的空间
设置top：-100px；

Paste_Image.png

在使用margin-top进行定位时，这时发现最下层div跟随中间的div一起向上移动了100px，这是因为margin的属性是相邻元素之间的定位，也就是这里margin使得div和div之间发生了偏移

Paste_Image.png

relative下同时设置top和bottom，left和right

absolute下同时设置top和bottom，left和right具有拉伸效果
relative下同时设置top和bottom，只有top会有效果，bottom无效，同时设置left和right，只有left有效，right无效

设置z-index的relative下的absolute
absolute的层叠高低取决于其父类元素relative的层叠级别
例如 relative中层级为1的absolute覆盖了relative中层级为3的absolute，这是因为首先要看父类元素的层级，再来判断absolute的大小

Paste_Image.png