下载首页 | 资讯中心 | 下载分类 | 最近更新 | 排 行 榜 | 国产软件 | 国外软件 | 汉化补丁 |
文章搜索: 分类 关键字 收藏本站设为首页
您的位置:首页网页设计CSS样式 → css布局定位系列:相对定位
css布局定位系列:相对定位
日期:2007-6-20 9:37:31 人气:86     [ ]
上一页 [1] 下一页
id="fontzoom">

英文原文:http://brainjar.com/css/positioning/default.asp 

  翻译:零度,转载请注明本文英文原文出处以及本文地址!由于我英文水平有限,有不懂的地方还请阅读原文,欢迎交流!

  相对定位

  当一个元素被指明为{position:relative;}的时候,它开始是遵守正常流规则的(也就是说,如果你不给他任何规则,他就和正常的一样,译者注),它周围元素相应的被定位。然后,元素盒根据它的属性值偏移。

  

  请注意上面元素周围的盒子是正常布局的,包括垂直边距的折叠,因此,采用相对定位的元素有可能覆盖其他元素。

  浏览器兼容性
  浏览器在处理相对定位元素覆盖其他元素的方法上是存在分歧的。不幸的是,W3C标准并没有指明应该怎么处理这个问题。
  因此,像IE5.5和Netscape6.0,会将相对定位元素显示在他周围元素的上面。而其余的,比如Opera5.0,将使用缺省栈指令,从而是将相对定位元素显示在文档流里比它先出现元素的前面,比它后出现元素的后面。
  栈指令在绝对定位参考中有详细的描述。但是请注意你可以使用z-index属性去设定它的显示顺序(z-index的值越大,元素越靠前显示!)

  可以联合使用top,right,left和bottom四个属性来设置相对定位元素的偏移值。每一个属性值被解释为元素外边框相对于原来正常位置的距离。

  请注意这些偏移值是有约束的。例如,假设你同时设定了left和right属性的值,如果其中一个元素的值不是另外一个值的相反值的话(比如4 和-4,译者注),那么right属性的值将会被忽略。设定某一个具体的宽度值也有可能使偏移值被忽略。这个规则同样适用于top,bottom以及 height属性。

  在实际中,你将很有可能只设定left,right中的任一个以及top,bottom中的任一个。

  子节点定位(Descendant Positioning)

  相对定位元素是否建立一个新的包含块以定位(相对定位或者绝对定位)子元素是不确定的,他们遵守非定位元素一样的规则。

  如果相对定位元素是块级元素,那么它将建立一个新的包含块。在它里面的元素使用元素的偏移量作为基础定位。也就是说,子元素的偏移量是一个复合值(包含块偏移量加上它自己的偏移量)

  如果相对定位元素是行类元素,它的偏移量和它的子元素没有关系,相反,它和它的子元素共享同一个父级包含块。

  浏览器兼容性

  最初的W3C标准声明,相对定位元素总是建立一个包含块。然而,后续标准修正了这个声明,指出相对定位元素和普通元素一样。

  有一些浏览器包括了这个修正但是有一些没有。由于这个差别,你可能希望避免这样的情况,总是使用一个块级元素用于相对定位。

  Trackback: http://tb.donews.net/TrackBack.aspx?PostId=1085194

出处:本站原创 作者:佚名
 阅读排行
01.精美qq空间横幅代码
02.最酷qq个性女生网名
03.最新又有免费QQ秀啦《..
04.巧用透明FlaSh扮靓你的..
05.花之神匠代码(最新代码..
06.最新QQ空间免费导航
07.最新免费个人形象设置..
08.最新qq空间flash代码m..
09.CSS技术结合图像实现动..
10.Photoshop光影魔术师:..
11.QQ音速种子狂刷
12.最新QQ空间透明代码
13.PS实例教程:教你制作结..
14.Photoshop光影魔术师:..
15.制作背景图__教程
16.用Photoshop制作漂亮的..
17.如何获得QQ音速种子
18.≤QQ空间代码≥在日志..
19.网页浮动广告的制作代..
20.用Photoshop制作大红灯..
21.常用CSS
22.Photoshop给靓丽美女打..
 推荐文章
·Photoshop 表现技法之..
·快速将你的相片矢量化..
·PHOTOSHOP制作炽热的太..
·用Photoshop制作美丽的..
·流行杀手的娃娃工厂__..
·打造8号台球__教程
·PHOTOSHOP制作待机MM图..
·用Photoshop帮MM做纹身..
·PHOTOSHOP美眉着色绝招..
·PHOTOSHOP花露的制作_..
·PHOTOSHOP渐变工具的巧..
·PHOTOSHOP手绘奥兰多-..
·高难度抠图两种方法__..
·Photoshop高尔夫球的制..
·Photoshop打造精美玉佩..
Eqxia_COM下载站 版权所有 Copyright© 2001-2005 Www.eqxia.COM, All Rights Reserved.