关于相对定位和绝对定位的区别

关于相对定位和绝对定位的区别

1. 相对定位，不会脱离文档流，所以它原来的位置是保留的;绝对定位，脱离文档流，

• 这是未开启任何定位时

.box1 {
			width: 400px;
			height:180px;
			margin-top: 100px;
			font-size: 20px;
			background-color: red;
			position: relative;
		}

		.box2{
			width: 400px;
			height:200px;
			font-size: 20px;
			background-color: yellow;
		}
		
<div class="box1">
		我是box1,我开启了相对定位
	</div>
	<div class="box2">
		我是box2
	</div>		

• 这是box1开启相对定位，并且left=400px的效果。

.box1 {
			width: 400px;
			height: 180px;
			margin-top: 100px;
			font-size: 20px;
			background-color: red;
			position: relative;//box1开启了相对定位
			left:400px;//向左偏移400px;
		}

		.box2 {
			width: 400px;
			height: 200px;
			font-size: 20px;
			background-color: yellow;
		}

两个盒子的宽度都是400px，但是box1向左偏移400px之后，box2并没有上去，这是因为虽然box1开启了相对定位，但并没有脱离文档流，所以根据块元素独占一行的性质，box2不能向上移，而且它原本的位置是保留的。

• 这是box1，开启绝对定位，并且left：400px的效果。

.box1 {
			width: 400px;
			height: 180px;
			margin-top: 100px;
			font-size: 20px;
			background-color: red;
			position: absolute;
			left: 400px;
		}

		.box2 {
			width: 400px;
			height: 200px;
			font-size: 20px;
			background-color: yellow;
		}
	<div class="box1">
		我是box1,我开启了绝对定位，且向左偏移400px;
	</div>
	<div class="box2">
		我是box2
	</div>

与上面唯一不同的是，box1开启的是绝对定位，绝对定位会是元素脱离文档流，所以box2就上去了。

2.相对定位是参照父元素，而绝对定位是参照离他最近且开启了定位的父元素。

• 这是未开启任何定位时

.box1 {
			width: 800px;
			height: 250px;
			margin-top: 100px;
			font-size: 20px;
			text-align:right;
			background-color: red;
		}

		.box2 {
			width: 400px;
			height: 200px;
			font-size: 20px;
			background-color: yellow;
		}
		<div class="box1">
		我是父元素box1
		<div class="box2">
			我是子元素box2
		</div>
	</div>

注意：为了大家更好的理解开启定位的元素是如何相对父元素移动的，我这里的偏移设置采用了%；

1. 在开启了相对定位之后，父级元素开不开启定位都没有关系，元素是始终参照父级元素进行移动的。

.box1 {
			width: 800px;
			height: 250px;
			margin-top: 100px;
			font-size: 20px;
			text-align:right;
			background-color: red;
			position: relative;//父元素开不开启定位都没关系，所以写不写效果一样。
		}

		.box2 {
			width: 400px;
			height: 200px;
			font-size: 20px;
			background-color: yellow;
			position:relative;
			left: 50%;//我的偏移只相对于父元素
		}
	<div class="box1">
		我是父元素box1
		<div class="box2">
			我是子元素box2
		</div>
	</div>

2. 开启了绝对定位的子元素是相对于离它最近且开启了定位的父元素进行偏移的。

例子一：

.box1 {
			width: 800px;
			height: 250px;
			margin-top: 100px;
			font-size: 20px;
			text-align:right;
			background-color: red;
			position: absolute;//父元素开启了定位
		}

		.box2 {
			width: 400px;
			height: 200px;
			font-size: 20px;
			background-color: yellow;
			position: absolute;;
			left: 50%;//离我最近且开启了相对定位的父元素是box1，所以我是相对于box1进行偏移的，left：50%=800px（box1的宽度）*50%=400px，也就是box2向左偏移400px；
		}
		<div class="box1">
		我是box1
	</div>
	<div class="box2">
		我是box2
	</div>			

例子二：

//这里与上面的例子不同，我多加了几个box。而且每个盒子的宽度都是有规律的。

.box1 {
			width: 800px;
			height: 250px;
			margin-top: 100px;
			font-size: 20px;
			text-align:right;
			background-color: red;
			position: absolute;//我开启了定位
		}

		.box2 {
			width: 400px;
			height: 200px;
			font-size: 20px;
			background-color: yellow;
			position: absolute;//我开启了定位
			
		}
		.box3 {
			width: 200px;
			height: 150px;
			font-size: 20px;
			background-color:papayawhip;//我没有开启定位
			
		}
		.box4 {
			width: 100px;
			height: 100px;
			font-size: 20px;
			background-color: palevioletred;
			position: absolute;
			left: 50%;//离box4最近且开启了定位的父元素是box2，所以是相对于bxo2进行偏移
		}
	<div class="box1">
		我是box1
		<div class="box2">
			我是box2
			<div class="box3">
				我是box3
				<div class="box4">
					我是box4
				</div>
			</div>
		</div>
	</div>
	

可见如果box3开启了定位，那么box4相对box3，向左偏移box3宽度的一半，效果是box4紧靠box3的右边。 但现在离box4最近且开启了定位的父元素是box2，所以是相对于bxo2进行偏移，left：50%=400px（box2的宽度）*50%=200px，也就是box2向左偏移200px。

最后总结相对定位和绝对定位的不同：

• 相对定位：

1. 不会脱离文档流，原有位置依然保留。
2. 在开启了相对定位之后，父级元素开不开启定位都没有关系，元素是始终参照父级元素进行移动的。
3. 相对定位不会改变自身的性质，块元素依旧是快元素，内联元素依旧是内联元素。

• 绝对定位

3. 会脱离文档流，可以覆盖其他元素
4. 开启了绝对定位之后，元素是相对于离他最近（最近最近）开启定位的元素（无论是相对，绝对，固定都ok）进行偏移，如果所有的父元素都没有开启则会相对窗口进行偏向。
5. 绝对定位会改变自身的性质，内联元素会变成块元素。（这也是脱离了文档流的特点）。

---

相同点：无论是开启什么定位，如果不设置偏移量，那么元素的位置不变。

希望我的文章能对你们有所帮助。如果哪里不懂可以留言，我会尽量讲清楚的。嘻嘻！