CSS中position:absolute的示例分析

这篇文章给大家分享的是有关CSS中position:absolute的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联公司是一家专注于做网站、网站设计与策划设计,奎屯网站建设哪家好?创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:奎屯等地区。奎屯做网站价格咨询:028-86922220

一、绝对定位的特征

绝对定位有着与浮动一样的特性,即包裹性和破坏性。

就破坏性而言,浮动仅仅破坏了元素的高度,保留了元素的宽度;而绝对定位的元素高度和宽度都没有了。

请看下面代码:

  
  
      
          
        绝对定位的特征  
          
      
      
          
              
              
            

这是普通流中的两幅图像。

           
                                                                                                                
               

左图,将第一幅图像绝对定位,其完全脱离文档流,并且覆盖在第二幅图像之上;由此看出,绝对定位的破坏性不仅让元素没有了高度,甚至没有了宽度。

               

右图,将第一幅图像左浮动,其虽然脱离了文档流,但是并没有覆盖在其他元素之上;浮动的破坏性仅仅破坏了元素的高度,而保留了元素的宽度。

           
                                                        

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

                    

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

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

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

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

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

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

偏移属性: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调整绝对定位元素的位置  
          
      
      
          
            卡哇伊  
              
            萌萌哒  
          
          
            卡哇伊  
              
            萌萌哒  
                   
          
            卡哇伊  
              
            萌萌哒  
               
          
            
                       
  1. 第一幅图,最开始的样子。
  2.                    
  3. 第二幅图,两个标签绝对定位,但是不指定任何偏移量。
  4.                    
  5. 第三幅图,用margin负值调整“萌萌哒”的位置,完成。
  6.                
                             

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

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

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

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

四、绝对定位与整体布局

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

  
  
      
          
        绝对定位与整体页面布局  
          
      
      
          
              
                

Header

                                                 

Aside

                                                 

实现原理

                   
                           
  1. 创建一个div.page,绝对定位,铺满全屏。
  2.                        
  3. 创建一个div.header,绝对定位,设定高度。
  4.                        
  5. 创建一个div.aside,绝对定位,设定宽度。
  6.                        
  7. 创建一个div.footer,绝对定位,设定高度。
  8.                        
  9. 创建一个div.content,绝对定位,根据周围div的宽高设定它的宽高;                       以div.content元素取代原body元素,所有的页面内容都放在这里面。
  10.                    
                                                 

Footer

                                   

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


网站栏目:CSS中position:absolute的示例分析
URL分享:http://bzwzjz.com/article/peegih.html