<!--相对定位position:relative-->
<div style="width: 100px;height: 100px;background-color: blue;position: relative;top: 50px;left: 50px;"></div>
<div style="width: 100px;height: 100px;background-color: aqua;"></div>
relative定位也是遵循正常的文档流,它没有脱离文档流,但是它的top/left/right/bottom属性是生效的,可以说它是static到absoult的一个中间过渡属性,最重要的是它还占有文档空间,而且占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动,也就是说它后面的元素是依据虚线位置( top / left / right / bottom 等属性生效之前)进行的定位
absolute 和 fixed的区别:
1.
<div style="position: fixed;top: 10px;left: 10px;width: 100px;height: 100px;background-color: aqua;">
<div style="position: fixed;top: 10px;left: 10px;width: 100px;height: 100px;background-color: bisque;"></div>
</div>
2.
<div style="position: absolute;top: 10px;left: 10px;width: 100px;height: 100px;background-color: aqua;">
<div style="position: fixed;top: 10px;left: 10px;width: 100px;height: 100px;background-color: bisque;"></div>
</div>
以上可以说明fixed是完全脱离文档流的,无论父级的position是什么属性,都不会影响到他自己的布局
1.
<div style="position: absolute;top: 10px;left: 10px;width: 100px;height: 100px;background-color: aqua;">
<div style="position: absolute;top: 10px;left: 10px;width: 100px;height: 100px;background-color: bisque;"></div>
</div>
2.
<div style="position: fixed;top: 10px;left: 10px;width: 100px;height: 100px;background-color: aqua;">
<div style="position: absolute;top: 10px;left: 10px;width: 100px;height: 100px;background-color: bisque;"></div>
</div>
3.
<div style="position: relative;top: 10px;left: 10px;width: 100px;height: 100px;background-color: aqua;">
<div style="position: absolute;top: 10px;left: 10px;width: 100px;height: 100px;background-color: bisque;"></div>
</div>
发现上面这三个得到的布局是一样的,子元素都根据父元素的位置进行了一定的偏移
4.
<div style="position: static;top: 10px;left: 10px;width: 100px;height: 100px;background-color: aqua;">
<div style="position: absolute;top: 10px;left: 10px;width: 100px;height: 100px;background-color: bisque;"></div>
</div>
这个测试结果为没有相对父元素进行偏移
结果:除了默认属性static外 ,子元素都会根据父元素的位置进行了一定的偏移,且fixed是根据窗口进行定位的,所以不会随着页面的滚动而滑动 ,这是和absolute的又一区别。