html相对位置与绝对位置的区别,Web前端面试题第八道—绝对定位与相对定位

相对定位(relative)：

先说相对定位：跟它的名一样，相对嘛，要有一个参照物，但这个参照不是别的，是它自己在原来文档流中的位置。相对定位之后的对象并没有完全从文档流中脱离，这个对象原来在文档中的位置保留着(站着茅坑不拉屎)，偏移后的对象会把其它的层遮罩住。

将相对定位特征总结如下：

①相对定位的元素，在没有设置宽度的情况下，宽度是整个浏览器的宽度，或者是依赖于父元素的宽度。

②相对定位的块状元素相对于原来位置移动，移动后仍然占据文档流的位置，不影响其他元素的布局

下面通过代码进行验证

在浏览器中放置5个盒子，用不同的颜色来表示，代码如下

HTML代码

CSS代码

最初效果图

给第三个盒子设置相对定位