css postion 理解 absolute 和fixed的区别

<!--相对定位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的又一区别。