注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Bioinformatics home

 
 
 

日志

 
 

CSS绝对定位  

2010-08-10 09:31:12|  分类: CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
绝对定位元素在常规流中的占位是未偏移前的位置
一旦一个框按照常规流或者是浮动得到定位,它还可以相对该位置而偏移。这就是相对定位。按照这种方式偏移一个框(B1)不会对后续的框(B2)有影响:
● B2在定位时,就好象B1没有发生偏移一样。
● B1偏移后,B2不会重新定位。
也就是说,B2只认没有偏移之前的B1,B1的偏移不对B2产生任何影响,相对定位的元素,是处于常规流中的,这点需要注意,另外,相对定位是相对于元素的自身定位,并且,在常规流中还占据原来的位置。
这也意味着相对定位可能产生框的重叠。比如,http://topic.csdn.net/u/20100728 /16/e10db11c-e212-4e10-83a2-df4ebbf7ccc7.html?70582中关于相对定位的例子中,红色的框 B 将其下面蓝色的框 C 覆盖了。
相对定位元素溢出包含块时,应由浏览器提供滚动条
然而,如果相对定位引起overflow:auto 或 overflow:scroll 框的溢出,浏览器必须允许用户访问内容,即,需要创建需要的滚动条,这可能会影响布局。
例:
HTML code

<div style="width:100px; height:100px; overflow:auto; border:2px solid blue;"> <div style="width:20px; height:20px; background-color:red; position:relative; top:100px; left:100px;">A</div> </div>
其中,红色的小块 A 定位的时候,已经超出外面蓝色框的显示范围了,已经溢出。根据标准,应该出现滚动条,以保证用户可以正常的访问 A 中的内容。此时,存在兼容性问题。
在Firefox/Chrome/Safari/IE8(S)/Opera中符合标准,截图:

在IE6(Q)/IE7(Q)/IE8(Q)中,没有出现滚动条,A 的内容也看不到:

在IE6(S)和IE7(S)中更奇怪,直接将 A 显示了出来:

相对定位元素的尺寸
相对定位元素的尺寸,会保持它在常规流中的尺寸。包括换行以及原来为它保留的位置。
包含块的章节中,说明了什么时候相对定位元素会产生新的包含块。
如何偏移以及计算后的值
对于一个相对定位的元素,’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 值的负值。
HTML code

<div style="width:20px; height:20px; background-color:red; position:relative; left:100px;"></div>
如上述代码中,DIV 元素是相对定位的元素,它的left 值是 ‘100px’, right 没有设置,默认为”auto”,那么,right 特性计算后的值应该是 -left,即’right:-100px’。
如果 left 和 right 都不是 auto,那么定位就显得很牵强,其中一个不得不被舍弃。如果包含块的 direction 属性是 ‘ltr’,那么 left 将获胜,right 值变成 "-left"。如果包含块的 direction 属性是 ‘rtl’,那么 right 获胜,left 值将被忽略。
HTML code

<div style="width:100px; height:100px; overflow:auto; border:1px solid blue;"> <div style="width:20px; height:20px; background-color:red; position:relative; left:60px; right:60px;"></div> </div>
最后,left应该比较强悍才对。
top 和 bottom 属性将相对定位元素向上或者向下移动,而不改变其大小。top 把框向下移动,而 bottom 将其向上移动。由于 top 和 bottom 没有造成框被拆分或者拉伸,计算值总是 top=-bottom,如果两个都是auto,其计算值就都是0,如果其中之一是auto,它就是另一个的负值。如果都不是auto,bottom被忽 略(例如,bottom的计算值会是top值的负值)。
注意:在脚本环境中,动态移动相对定位框区能够产生动画效果(见“visibility属性”部分)。虽然 相对定位可以用于创建上标或者下标,行高并不会被自动调整以适应定位需要。
至此,常规流中的要素就已经介绍完毕,下面的分享中将开始介绍浮动和绝对定位的内容,敬请期待……
  评论这张
 
阅读(1102)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017