解读Position

首先Position在字面讲是位置的意思，在HTML中是定位的意思，它有四种属性：分别是static是静态的，也是默认的效果，没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。

absolute（绝对定位）

absolute(绝对定位)不光脱离了文本流，而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位，如果有一个工人走了 自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL(TOP、RIGHT、BOTTOM、LEFT简 称TRBL)来设置元素，使之处在任何一个位置。在父层position属性为默认值时，TRBL的坐标原点以body的坐标原点为起始。

　　relative(相对定位)只可以在文本流中进行位置的上下左右的移动，虽然他的表现区脱离了文本流，但是在文本流却依然为其保留了一席之地，这就好比 一个打工的人他到了外地，但是在老家依然有一个专属于他的位置，这个位置不随他的移动而改变。这样很明显就会空出一块空白来，如果希望文本流抛弃这个部分 就需要用到绝对定位。

　　fixed (固定定位)
生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

　　下面我用的实例具体讲一下Position的应用　：

 

　　
    
        
        
    
    
        

            

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

                        
                    

                    
                    

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

            

            
                

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

            

                

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

            

            

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

            

                    
            

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

            

            

                    

                    

                    

                    

                    
                    

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 
                          

                        
• 4
                          

                    

            

                
        
            

                        
            
                
        
                    
            
            
            
                
            
                
            
        

            

            

            

            

急
救

            

青
囊

            

class="x1"

            

class="x2"