定位

定位

使用position
普通流定位：默认定位（static）
相对定位（relative）、绝对定位（absolute）、固定定位（fixed）

相对定位、绝对定位、固定定位

相对定位是相对原来的位置的左上角来移动，可以进行局部的微调
绝对定位和固定定位是body左上角来进行定位的。
固定定位是滚动条不管怎么滚动都是在屏幕固定的那个位置。

.a{
				width: 100px;
				height: 100px;
				background-color: red;
				/*相对定位*/
				position: relative;
				top: 100px;
				left: 100px;			
			}
			.b{
				width: 100px;
				height: 100px;
				background-color: green;
				/*绝对定位*/
				position: absolute;
				top: 100px;
				left: 100px;				
			}
			.c{
				width: 100px;
				height: 100px;
				background-color: blue;
				/*固定定位*/
				position: fixed;
				top: 600px;
				left: 500px;
			}

相对定位和绝对定位的结合使用：
在父级元素中加上相对定位，在子级中加上绝对定位
效果：以父级元素左上角进行定位

.father{
				width: 500px;
				height: 500px;
				border: 1px solid yellow;
				margin: 0 auto;
				position: relative;
			}
			.a{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				top: 300px;
				left: 200px;
			}
			.b{
				width: 100px;
				height: 100px;
				background-color: green;
			}
			.c{
				width: 100px;
				height: 100px;
				background-color: blue;
				
			}
	

效果