CSS中position:absolute的示例分析

将容器绝对定位，体现其包裹性。

二、绝对定位的一般规则：

元素绝对定位时，会完全脱离文档流，并相对于其包含块定位。

绝对定位的包含块，是其最近的已定位的祖先元素。

如果这个祖先元素是块级元素，包含块则为该祖先元素的内边距边界，即边框。

如果这个祖先元素是行内元素，包含块则为该祖先元素的内容边界，即内容区。

如果没有已定位的祖先元素，元素的包含块定义为初始包含块。

偏移属性：top、right、bottom、left。

如果绝对定位的元素没有设置偏移属性，虽然脱离文档流，但是它的位置是原地不动的。

偏移属性可以为负值，将元素定位到包含块之外。

代码在这里：

  
  
      
          
          
          
      
      
          
              
                
元素绝对定位时，会完全脱离文档流，并相对于其包含块定位。绝对定位的包含块，是其最近的已定位的祖先元素。
  
                  
                
  
                    
如果这个祖先元素是块级元素，包含块则为该祖先元素的内边距边界，即边框。
  
                    
如果这个祖先元素是行内元素，包含块则为该祖先元素的内容边界，即内容区。
  
                    
如果没有已定位的祖先元素，元素的包含块定义为初始包含块（一个视窗大小的矩形）。
         
                
  
              
          
          
              
            
不管有没有已经定位的祖先元素，只要没有偏移量，绝对定位之后，原地不动，脱离文档流。
  
            
下面这个已经绝对定位的图像原地没动，但是已经脱离了文档流。
  
              
              
          
          
              
                
没有已经定位的祖先元素，有偏移量，绝对定位之后，以初始包含块（一个视窗大小的矩形）为基准进行偏移。
  
                
当偏移量为left:0; buttom:0时，图像水平偏移到了初始包含块左下角（打开网页最开始的那一个视窗的左下角）。
  
                  
              
          
          
              
                
有已经定位的祖先元素，有偏移量，绝对定位之后，以已经定位的祖先元素为基准进行偏移。
  
                
此处已经定位的祖先元素为这个图像的容器div元素，偏移量为left:0; bottom:0时，图像到了这个容器的左下角（以边框为界）。
  
                  
              
          
          
              
                
有已经定位的祖先元素，有偏移量，绝对定位之后，以已经定位的祖先元素为基准进行偏移。
  
                
此处已经定位的祖先元素为这个图像的容器div元素，偏移量为left:-30px; bottom:-50px时，图像到了这个容器之外（以边框为界）。
  
                  
              
          
           

三、用margin调整绝对定位元素的位置

绝对定位的元素，除了可以使用top、right、bottom、left进行偏移之外，还能够通过margin值进行精确定位，而且自适应性更好。

示例：

  
  
      
          
          
          
      
      
          
            卡哇伊  
              
            萌萌哒  
          
          
            卡哇伊  
              
            萌萌哒  
                   
          
            卡哇伊  
              
            萌萌哒  
               
          
            
  
                
第一幅图，最开始的样子。
  
                
第二幅图，两个标签绝对定位，但是不指定任何偏移量。
  
                
第三幅图，用margin负值调整“萌萌哒”的位置，完成。
  
            
  
                   
      

放弃偏移属性而改用margin来调整绝对定位元素，其原理在于：

绝对定位的元素，在不设置偏移量的时候，它虽然完全脱离了文档流，但它还在原来的位置。

利用偏移属性进行精确定位，其具体位置是取决于绝对定位元素的包含块，不同的包含块将会有完全不一样的定位结果。

而利用margin进行精确定位，不依赖于任何其他东西，更加可控。 

四、绝对定位与整体布局

如何用绝对定位来对页面进行整体布局？

  
  
      
          
          
          
      
      
          
              
                
Header
  
              
              
                
Aside
  
              
              
                
实现原理
  
                
  
                    
创建一个div.page，绝对定位，铺满全屏。
  
                    
创建一个div.header，绝对定位，设定高度。
  
                    
创建一个div.aside，绝对定位，设定宽度。
  
                    
创建一个div.footer，绝对定位，设定高度。
  
                    
创建一个div.content，绝对定位，根据周围div的宽高设定它的宽高；  
                    以div.content元素取代原body元素，所有的页面内容都放在这里面。
  
                
  
              
              
                
Footer
  
              
          
      

感谢各位的阅读！关于“CSS中position:absolute的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！