爱奇思

学习就是——从糊涂中慢慢走向清醒,然后再从清醒中慢慢走向糊涂,所以说我说它是一个O,只是圆的半径慢慢的扩大罢了!
posts - 60, comments - 128, trackbacks - 0, articles - 8
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

探究定位和百分比

Posted on 2010-06-08 15:13 牛牛博客 阅读(...) 评论(...) 编辑 收藏
注(系列浏览器除外):
前提知识:
一般元素默认的都是static。布局按照文档流,当用position:absolute定义时,即被定义成inline-block,将脱离文档流的控制,后面的元素将会填充该元素原来的为位置。
至于相对定位,本身还在文档流中,只是用top,left等相对于本来自身在文档流中的位置偏移。用relative,absolute定义的元素的外边距,内边距,边框,只受该元素的display属性的影响。

1.当都定义为static(默认就是),除了ie6外,用padding,margin使用的百分比定位block,inline-block元素时,其百分比是相对于离其最近的父层宽度计算的,加入父层没有设置宽度,则向上一层找,一直找到,body可宽度,拿来计算
2,定义left,top,right,bottom定义relative的的元素,相对于其父层元素的宽高来计算
2.当本层为类型为absolute其百分比是相对于离其最近的父层元素(用fixed,absolute,relative的元素)的高,宽来计算的定义的,循环向上找,没有找到时,用absolute的元素相对于body,relative定义的元素并没有偏离文档流,只能相对于父层
3,对于第二种情况当元素时fixed,他只队对于window.body的高或宽计算。