position的值有以下五种。现结合样例谈一下我对这五种值的认识：

        一、不使用不论什么值：

        代码1-1例如以下：       

			
     						
     
			
      
       son1
      
			
      
       son2
      
		
     
	

图1-1

        二、static：默认值。

没有定位，元素忽略 top, bottom, left, right 或者 z-index 声明，依照正常的文档流进行排列。

        代码2-1例如以下：

			
     						
     
			
      
       son1
      
			
      
       son2
      
		
     
	

图2-1

        总结：

        ①、比对图1-1与图2-1能够发现两者没有什么区别，这说明static是position的默认值；

        ②、上面代码son1 div样式中设置了left和top属性，但从图2能够发现这些属性的设置并没有起到应有的作用。这印证了position为static时会忽略 top, bottom, left, right 或者 z-index 声明

        三、relative：这个单词本身是“相关、相对”的意思，从这个单词能够看出该值的作用。只是这里要搞清楚它是相对哪个对象来进行偏移的。

        代码3-1例如以下：

			
     						
     
			
      
       son1
      
			
      
       son2
      
		
     
	

图3-1

        总结：

        ①、对照图1-1代码和图3-1代码，对照图1-1和图3-1，能够得出这样的结论：son1是相对它原来的位置进行偏移的；

        ②、哪些属性能够设置son1的偏移位置：top、right、bottom、left都能够做到。

        ③、son1和son2属于同级。son1偏移后，那son2偏移了吗？son2没有偏移。它依旧在原来的位置，事实上①已经能够回答这个问题了。能够这样理解：假设没有设置position的值。son1的位置会依照正常的文档流进行排列。假设设置son1 position属性的值为relative。son1的位置会依照top、right、bottom、left的值进行位置偏移，这样的偏移是相对它原来的位置进行的（relative的“相对的”意思也正体现于此）；

        ④、假设为son2也加入position的值为relative并加入left等属性，会发生什么？通过①能够回答这个问题：会依照son2原来的位置进行相对的偏移，还是那句话——这里的“相对”是与原来的位置相比。

        ⑤、呵呵呵，上面几点中有三点提到了“原来的位置”，那么它相对于原来位置的哪个部位偏移的呢？中心吗？不是的，relative的偏移是基于对象的margin的左上側的来说的；

        四、absolute：毫不掩饰，当初学习这块儿时。就是这个absolute把我弄懵了，呵呵呵。以下通过样例来一层层的理解这个absolute（注意：为了更好地理解absolute值。请先“忘掉前面讲的一切”）：

        代码4-1例如以下：

			
     						
     
      son1
     
		
     
      son2
     
	

图4-1

        说明：观察代码4-1可知上图中没有使用position属性，也就是说position属性的值为static。

        代码4-2例如以下：

			
     						
     
      son1
     
		
     
      son2
     
	

图4-2

        说明：比对代码4-1和代码4-2。能够看到唯一变化的地方就是son1的样式加入了“position:relative;left:150px;”；

        代码4-3例如以下：

			
     						
     
      son1
     
		
     
      son2
     
	

图4-3

        说明：比对代码4-2和代码4-3，能够看到唯一变化的地方就是son1的样式position的属性值有relative改为了absolute。

        总结：

        ①、对照图4-2和图4-3可以非常轻易的得出relative和absolute的一个区别：relative所作用的元素移动后。原来的位置没有被其他元素占用；absolute所作用的元素移动后，原来的位置会被其他元素占用。

        ②、absolute影响的元素移动后之所以会被其他元素占用是因为被absolute影响的元素脱离了文档流。不在自上而下、自左而右的显示元素。而还有一个元素（son2）则没有脱离文档流。这时没有脱离文档流的元素直接从父元素（body相对于son2而言是父元素）開始定位，即言没有脱离文档流的元素（son2）的文档流不再基于absolute影响的元素（son1）而是基于父元素定位。于是就看到了这样的情形；

        代码4-4例如以下：

			
     						
     
			
      
       son1
      
			
      
       son2
      
		
     
	

图4-4

        说明：观察代码4-4可知class为parent的div没有使用position属性，也就是说其position属性的值为static；

        代码4-5例如以下：

			
     						
     
			
      
       son1
      
			
      
       son2
      
		
     
	

图4-5

        说明：观察代码4-5可知class为parent的div的position属性的值为absolute；

        代码4-6例如以下：

			
     						
     
			
      
       son1
      
			
      
       son2
      
		
     
	

图4-6

        说明：观察代码4-6可知class为parent的div的position属性的值为relative。

        代码4-7例如以下：

			
     						
     
			
      
       son1
      
			
      
       son2
      
		
     
	

图4-7

      说明：观察代码4-7可知class为parent的div的position属性的值为fixed。

        总结：

        ①、对照图4-4、图4-5、图4-6和图4-7能够非常轻易的得出这样一个结论：假设某一absolute作用的元素（比方：上面的son1）的父对象(或曾祖父，仅仅要是父级对象（比方上面class为parent的div）)设置了position属性且position的属性值为absolute、relative或者fixed，那么这个子元素（比方：上面的son1）会參照离它（指子元素）近期的且position的属性值为absolute、relative或者fixed的父元素（比方上面class为parent的div）进行定位，但是以父元素哪个定位点来进行定位呢，答案是父元素的左上角（永远都是父元素的左上角，假设父元素样式中有padding也是这样，这一点可參考还有一篇博客——《》）。假设子元素（比方：上面的son1）的全部父元素的position属性值不为absolute、relative或者fixed，那么该子元素将以body为定位对象进行定位，图4-4非常好的演示了这一点（注意：单单就子元素而言图4-4和图4-3是一样的，它们參照定位对象都是body）；

        ②、因为将元素position属性设置为absolute后，会导致该元素脱离文档流。就像它不属于父对象一样，它漂浮了起来，在DreamWeaver中把它称为“层”，事实上意思是一样的；

        五、fixed：fixed是特殊的absolute。position属性值为fixed的元素总是以body元素为定位对象（即依照浏览器的窗体进行定位）通过"left"、"top"、"right"或"bottom" 属性进行规定，即使拖动滚动栏，该元素所在的位置也不会改变的（与background-attachment:fixed类似）。

        六、inherit：该属性作用的元素继承父元素position的属性值。因为该属性在不论什么的版本号的 Internet Explorer （包含 IE8）都不支持，所以能够忽略它。

        【】