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

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

行为 练习 14571浏览 1评论

一旦一个框按照常规流或者是浮动得到定位,它还可以相对该位置而偏移。这就是相对定位。按照这种方式偏移一个框(B1)不会对后续的框(B2)有影响:
B2在定位时,就好象B1没有发生偏移一样。
B1偏移后,B2不会重新定位。

也就是说,B2只认没有偏移之前的B1,B1的偏移不对B2产生任何影响,相对定位的元素,是处于常规流中的,这点需要注意,另外,相对定位是相对于元素的自身定位,并且,在常规流中还占据原来的位置。
这也意味着相对定位可能产生框的重叠。

相对定位元素的尺寸
相对定位元素的尺寸,会保持它在常规流中的尺寸。包括换行以及原来为它保留的位置。
在包含块的章节中,说明了什么时候相对定位元素会产生新的包含块。

如何偏移以及计算后的值

对于一个相对定位的元素,’left’ 和 ‘right’ 会水平的位移框而不会改变它的大小。’left’会将框向右移动,’right’会将框向左移动。由于 ‘left’ 或者 ‘right’ 不会造成框被拆分或者拉伸,所以,计算后的值(computed value)总是:left = -right。

如果 left 和 right 的值都是 ‘auto’ (它们的初始值),计算后的值(computed value)为 0(例如,框区留在其原来的位置)。

如果 left 为 ‘auto’,计算后的值(computed value)为 right 的负值(例如,框区根据 right 值向左移)。

如果 right 被指定为 ‘auto’,其计算后的值(computed value)为 left 值的负值。

提示:你可以先修改部分代码再运行。

如上述代码中,DIV 元素是相对定位的元素,它的left 值是 ‘100px’, right 没有设置,默认为”auto”,那么,right 特性计算后的值应该是 -left,即’right:-100px’。

如果 left 和 right 都不是 auto,那么定位就显得很牵强,其中一个不得不被舍弃。如果包含块的 direction 属性是 ‘ltr’,那么 left 将获胜,right 值变成 “-left”。如果包含块的 direction 属性是 ‘rtl’,那么 right 获胜,left 值将被忽略。

提示:你可以先修改部分代码再运行。

top 和 bottom 属性将相对定位元素向上或者向下移动,而不改变其大小。top 把框向下移动,而 bottom 将其向上移动。由于 top 和 bottom 没有造成框被拆分或者拉伸,计算值总是 top=-bottom,如果两个都是auto,其计算值就都是0,如果其中之一是auto,它就是另一个的负值。如果都不是auto,bottom被忽略。

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

发表我的评论
取消评论

表情

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

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

网友最新评论 (1)

  1. 我用firefox測試,好像字還是會超過那個紅色的框框幾個字符。
    9NPC13年前 (2008-02-19)回复