CSS中的定位属性

CSS 定位令你可以将一个元素精确地放在页面上你所指定的地方。

absolute 绝对定位

脱离原位置进行定位

下面举个绝对定位的例子 ：
在文档的四个角落各放四个盒子
html代码段

	
		
		
		
	
	
		
box1
		
box2
		
box3
		
box4
	

css代码段

div{
	width:100px;
	height:100px;
	text-align:center;
}
#box1{
	position:absolute;
	top:50px;
	left:50px;
	background-color: darkred;
}
#box2{
	position:absolute;
	top:50px;
	right:50px;
	background-color: orange;
}
#box3{
	position: absolute;
	bottom:50px;
	left:50px;
	background-color: yellow;
}
#box4{
	position: absolute;
	bottom: 50px;
	right:50px;
	background-color: green;
}

效果图

relative 相对定位

保留原位置进行定位

其位置是相对于它在文档中的原始位置计算而来的。这意味着，相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。采用相对定位的元素会获得相应的空间。

举例

我们可以相对于三张图片在页面上的原始位置来对它们进行相对定位。注意这些图片将在文档中各自的原始位置处留下空位

html代码段

css代码段

#dog1{
	position:relative;
	left:35px;
	bottom:15px;
}
#dog2{
	position:relative;
	left:35px;
	bottom:50px;
}
#dog3{
	position: relative;
	left:10px;
	bottom:70px;
}

效果图