CSS中的position定位CSS中position的定位主要分为静态定位，相对定位，绝对定位和固定定位，属性值分别为

CSS中position的定位主要分为静态定位，相对定位，绝对定位和固定定位，属性值分别为：static，relative，absolute，fixed；元素的位置通过 "left", "top", "right"， "bottom" 属性进行规定，其中优先级为：top>bottom,left>right。

static：静态定位。

它是position的默认值，一般不设置position属性时，元素会按照正常的文档流进行排列。

relative：相对定位。

relative属性，我们只要搞清它是相对哪个对象来进行偏移的就ok了，答案是它原本的位置。需要注意的是，相对定位不会脱离文档流，原来的位置仍然被保留。

我们举个栗子，设置如下的代码：

<head>
        <style type="text/css">
            body{background-color: yellow;}
            img{
                width: 300px;
                height: 400px;
            }
            #div1{
                width: 300px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <img src="img/houzi.jpg" />
        <div id="div1"></div>
    </body>

效果如图：

这时候我们把img的css代码设置成这样：

img{  width: 300px;
         height: 400px;
         position: relative;
         left: 150px;
         top: 200px;  }

再来看看效果：

可以看出，图片在原来位置的基础上，向右移动了150px，向下移动了200px，并且红色div元素仍然在它原本的位置上，并没有因为img元素的移动而产生位置上的变化，这是因为虽然图片的位置发生了变化，但他原来的位置仍然保留着，没有脱离文档流。

absolute：绝对定位。

它是相对不是static的最近一级父元素来进行定位的，如果没有这样的元素，那么就相对body元素来进行定位，被定位元素会脱离文档流，然后我们可以通过left,right,top,bottom来调整元素的位置。

我们可以这样理解：假设一个div元素，他所有的父级元素属性都是position：static，也就是所有父级元素都没有设置position，那么这个div就会相对body元素来进行定位。如果这个div元素存在某一个父级元素设置了除static以外的position，那么这个div就会相对这个父元素来进行定位。

看这段代码：

	<head>
		<style type="text/css">
			body{background-color: yellow;}
			#red{
				width: 400px;
				height: 400px;
				background-color: red;
			}
			#blue{
				width: 100px;
				height: 100px;
				background-color: blue;
				position: absolute;
				right: 100px;
				top: 100px;
			}
		</style>
	</head>
	<body>
		<div id="red">
			<div id="blue"></div>
		</div>
	</body>

效果图：

我们发现蓝色div虽然是红色div的子级元素，却并没有在红色div的内部，而是在加上position：absolute属性后直接相对body元素定位到了右侧。

那么试着在红色div的CSS内加上position：relative；看看会发生什么。

#red{
    width: 400px;
    height: 400px;
    background-color: red;
    position: relative;
			}

效果图：

我们发现，当蓝色div的父级红色div内加上position：relative；后，蓝色div变成相对于红色div定位了。

从这里我们可以看出，当一个元素设置了position:absolute属性之后，而它的父级元素的属性为position:relative时，它不再是相对于文档定位，而是相对于父元素定位。最重要的是，父元素设置为position:relative并不会脱离文档流，也就是说利用给父元素设置position:relative属性，再将子元素设置为position:absolute就可以在文档流中实现需要的定位，这是一种常见的方法。

fixed：固定定位。

固定定位是最好理解的，它相对于浏览器的窗口进行定位并脱离文档流，即使拖动滚动条，元素的位置也是不变的，我们使用浏览器时一些广告的效果就是这样的。

看看代码：

	<head>
		<style type="text/css">
			body{background-color: yellow;}
			#div1{
				width: 400px;
				height: 10000px;
				background-color: red;
			}
			img{
				width: 300px;
				height: 400px;
				position: fixed;
				right: 50px;
				top: 100px;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<img src="img/houzi.jpg" />
 	</body>

效果图：

我们拖动滚动条到中间的位置，

猴子图片仍然在这个位置。

总结：

position：relative；不脱离文档流，相对于元素原来的位置进行定位。

position：absolute；脱离文档流，如果所有的父级元素都没有position属性，相对于body定位；如果存在父级元素有position属性，相对于最近的那个有position属性的父级元素进行定位。

position：fixed；脱离文档流，相对于浏览器窗口定位。