值
描述
static
默认值。没有定位，元素出现在正常的流中。
（忽略 top, bottom, left, right 或者 z-index 声明）。
relative
生成相对定位的元素，相对于其正常位置进行定位。
（元素的位置可以通过 "left","top"属性进行规定）。
absolute
生成绝对定位的元素，相对于static 定位以外的第一个父元素进行定位。（元素的位置只能通过"left", "top", "right" 以及"bottom" 属性进行规定）。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
（元素的位置只能通过 "left","top", "right" 以及"bottom" 属性进行规定）。
inherit
规定应该从父元素继承 position 属性的值。
首先初始化样式：
* {
padding:0px;
margin:0px;
}
html,body {
background-color: lightgray;
width: 100%;
height: 100%;
1、static默认定位：
#div1{
width: 200px;
height: 200px;
background-color: #FF66FF;
<body>
<div id="div1">
div1
</div>
</body>
<a href="http://s3.51cto.com/wyfs02/M02/6D/8E/wKioL1VmhiKyY9nZAABaYjACd4M130.jpg" target="_blank"></a>
<a href="http://s3.51cto.com/wyfs02/M02/6D/92/wKiom1VmhLKxqwOlAAB1BhJUZ-Y447.jpg" target="_blank"></a>
<a href="http://s3.51cto.com/wyfs02/M01/6D/92/wKiom1VmhOOTRYUMAABtFqf2ZkE661.jpg" target="_blank"></a>
<a href="http://s3.51cto.com/wyfs02/M01/6D/8E/wKioL1Vmhq6SG89kAACGJbRJVaE368.jpg" target="_blank"></a>
本文转自 yntmdr 51CTO博客，原文链接：http://blog.51cto.com/yntmdr/1655872，如需转载请自行联系原作者
![CSS布局之-浮动(Float)与定位(Position)-让盒子飞！[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)