CSS中position:absolute的示例分析-古蔺大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

CSS中position:absolute的示例分析

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

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

一、绝对定位的特征

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

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

请看下面代码：

  
  
      
          
        绝对定位的特征  
          
      
      
          
              
              
            这是普通流中的两幅图像。

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

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

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

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

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

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

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

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

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

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

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

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

代码在这里：

  
  
      
          
        绝对定位的一般规则  
          
      
      
          
              
                元素绝对定位时，会完全脱离文档流，并相对于其包含块定位。绝对定位的包含块，是其最近的已定位的祖先元素。  
                  
                  
                    如果这个祖先元素是块级元素，包含块则为该祖先元素的内边距边界，即边框。  
                    如果这个祖先元素是行内元素，包含块则为该祖先元素的内容边界，即内容区。  
                    如果没有已定位的祖先元素，元素的包含块定义为初始包含块（一个视窗大小的矩形）。

不管有没有已经定位的祖先元素，只要没有偏移量，绝对定位之后，原地不动，脱离文档流。

下面这个已经绝对定位的图像原地没动，但是已经脱离了文档流。

没有已经定位的祖先元素，有偏移量，绝对定位之后，以初始包含块（一个视窗大小的矩形）为基准进行偏移。

当偏移量为left:0; buttom:0时，图像水平偏移到了初始包含块左下角（打开网页最开始的那一个视窗的左下角）。

用margin调整绝对定位元素的位置卡哇伊萌萌哒卡哇伊萌萌哒卡哇伊萌萌哒

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

绝对定位与整体页面布局

Header

Aside

实现原理

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

新闻中心

Header

Aside

实现原理

Footer

其他资讯