css绝对定位和相对定位

css绝对定位和相对定位

相对定位：

相对于它的起点进行移动，移动后原来的位置依旧还被占用着
可以用left right top bottom四个属性来设置标签偏移量

特点：

1.当开启了标签的相对定位后，而不设置偏移量时，标签不会发生任何变化
2.相对定位是相对于标签在文档流中原来的位置进行定位
3.相对定位的标签不会脱离文档流

绝对定位：

开启绝对定位，标签立即脱离文档流
绝对定位是不占空间的

参照物：

离他最近的开启定位的父级标签

特点：

1.开启绝对定位会使标签脱离文档流
2.如果不设置偏移量，标签位置不变
3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位
(一般情况，开启了子标签的绝对定位都会同时开启父标签的相对定位)
如果所有祖先标签都没有开启定位，则会相对于浏览器窗口进行定位

html：

	<div class="div2">
		div3
		<div class="div1">
			div1
		</div>
	</div>

css：

			.div1{
				background-color: #0000FF;
				height: 100px;
				width: 100px;
				position: absolute;
				left: 100px;
				top: 100px;
			}

			.div2{
				background-color: #F0F8FF;
				height: 200px;
				width: 200px;
				position: relative;
			}

因为div2是div1的父级且是相对定位，div1是绝对定位，所以此时div1在div2的右下角对齐