Position 绝对定位和相对定位

Position 绝对定位和相对定位

   Css中绝对定位和相对定位即position属性

   Position :   static /  absolute / fixed / relative

   static:静态   absolute:绝对定位    fixed:固定   relative：相对定位

 

static : 无特殊定位，对象遵循HTML定位规则

 

absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。

 

relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

 

fixed :  E5.5及NS6尚不支持此

  

   一般最实用的就是绝对定位（absolute）和相对定位（relative）

   绝对定位（absolute）：给予此定位方法的对象将会被从文档流中拖出，然后使用left；right；top；bottom（四个至少有一个存在具体的值）等属性相对与其最接近的一个最有定位设置的父级对象进行绝对定位，如果父级对象没有设置定位属性，那么将遵循HTML的定位规，以body的左上角为参考进行定位。绝对定位的对象可以重叠，层叠的顺序可以通过z-index属性进行控制，z-index的值是无单位的整数，大的在上面，其值可以为负。（目前FF不支持z-index的值为负）

   仅使用margin属性进行绝对定位元素的情况时，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。        

  

   相对定位（relative）：对象不可以层叠，依据left；right；top；bottom（四个至少有一个存在具体的值）等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。（简单的说就是相对与自己定位的）

   混合使用left、right、top和bottom属性与margin属性进行相对定位元素的时候margin属性和top、bottom、left、right属性同时使用，如果同一方向偏移，它们的值会产生累加的效果。

  

   绝对定位和相对定位的累加加效果不同，如果top、bottom、left、right属性和margin属性偏移的方向相反，top、bottom、left、right属性值有效，反方向的margin属性值无效。

   总结：

   相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。

   绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。

绝对定位的元素以最近的定位祖先元素为参照物。

澄星网络联系方式

专注品牌网站设计

电话：[phone]

传真：[phone]

QQ：40297078

网址：http://www.clstar.net

地址：西安市碑林区兴庆路9号兴庆九号大厦1305室