相对定位relative
relative相对定位
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
.first_relative{
position: relative;
left: 100px;
top: 20px;
background: yellow;
}
将first元素设置为相对定位,left:100px;top:20px; 这里的first元素在移动位置后依旧保持原来的空间,在添加second元素后发现它在first原来的位置后面继续排列着。

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


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

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


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

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

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

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

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

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的大小
