你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。

可视化格式模型-绝对定位

表现 练习 21170浏览 13评论

相对包含块偏移定位
在绝对定位模型中,一个框明确地基于它的包含块偏移。不是父元素,这点需注意。
要是人家问你,绝对定位相对于谁定位啊?你很快乐的说:它的父元素。那就显得矬了- -!
专业的说法,相对于包含快定位。所以,绝对定位元素的定位,关键是包含块

完全脱离常规流
它完全脱离了常规流(对后继的兄弟节点没有影响)。
这一点又与浮动元素不同,好歹浮动元素会对后继的行框产生影响,而且,后面声明的绝对定位元素也不会受前面定义的绝对元素的影响。
可以这么理解,常规流中的元素,都在同一个层上,浮动是处于常规流之上的一个特殊层,可能会对常规流中的元素有影响。但是绝对定位的元素不会,可以把每个绝对定位的框看做一个单独的图层,独来独往。所以,说它完全脱离了常规流也不无道理。
注意一点,绝对元素定位的 top 和 left 值跟绝对元素未脱离常规流之前在常规流中位置有关。

绝对定位元素生成的包含块
一个绝对定位框会为它的常规流子元素和定位派生元素(不包含 fiexed 定位的元素)生成一个新的包含块。不过,绝对定位元素的内容不会在其它框的周围排列。
至于,为何只为常规流中的子元素还有绝对定位元素生成包含块,就不大了解了……有知道的么?分享一下……
注意,绝对定位框还会创建 block formatting contexts。在IE中则会触发 hasLayout 。

堆叠层次
它们可能会掩盖另一个框的内容,或者被另外一个框掩盖,这取决于互相重合的框的堆叠层次。 也就是我们前面说的三维的可视化模型,除了X轴,Y轴,还有Z轴。

固定定位(Fixed positioning)

固定定位是绝对定位的一个子类。唯一的区别是,对于固定定位框,它的包含块由可是窗口(viewport)创建。对于连续媒介,固定定位框并不随着文档的滚动而移动。从这个意义上说,它们类似于固定的背景图形。对于页面媒介,固定定位框在每页里重复。对于需要在每一页底部放置一个签名时,这个方法非常有用。

转载请注明:练小习的前端技术笔记 » 可视化格式模型-绝对定位

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (13)

  1. 可惜不支持背景
    pyzy12年前 (2009-07-01)回复
  2. 文章写的很实用,支持一下
  3. 很好的一个东东,把他改动一下应该就很好用了。
    kilobug12年前 (2009-02-22)回复
  4. 太专业了吧。
    广播电台在线12年前 (2009-02-12)回复
  5. behavior是IE6专有的。 不过这个htc对于重复的PNG背景处理以后页面打开巨慢。 我日微软。我日IE
    西邻12年前 (2009-01-20)回复
  6. 我只想说,让IE6快点死吧!!!!!!!!
    修行12年前 (2008-11-30)回复
  7. IE6透明背景repeat是个噩梦
    练习12年前 (2008-11-06)回复
  8. 这种hack貌似无法处理背景图repeat的问题。
    bunorte12年前 (2008-11-06)回复
  9. 那也应该用ite,因为是ie6专用的么。
    ZeroZ12年前 (2008-10-16)回复
  10. 导出预览
    练习12年前 (2008-10-16)回复
  11. 在Fireworks哪里可以设置导出的是 24还是32 ?
    neekey12年前 (2008-10-16)回复
  12. IT是小于的意思
    项羽12年前 (2008-10-16)回复
  13. 不是ie6专用的hack么? 怎么会是<!--[if lt IE 7]>
    ZeroZ12年前 (2008-10-15)回复