Yesky首页| 产品报价| 行情| 手机 | 数码 | 笔记本 | 台式机 | DIY硬件 | 外设 | 网络 | 数字家庭 | 评测 | 软件 | e时代 | 游戏 | 图片 | 壁纸 | 群乐 | 社区 | 博客 | 下载
软件频道>设计在线>网页UI|平面网页Flash视频三维欣赏|设计专题教程素材| 群乐:Vista系统下载
您现在的位置: 天极网 > 软件频道 > 设计在线 > 网页UI设计 > CSS网页中的相对定位与绝对定位
全文
群乐:网页设计

CSS网页中的相对定位与绝对定位

2007-05-09 11:07 作者: 网页教学网 出处: 论坛整理 责任编辑:Shiny

  在CSS中有这样的一个指令:(position),在DreamWeaver中文版中翻译为“定位”,常用的属性有两个:relative(相对)与 absolute(绝对)。有很多朋友对这条指令的用法还是不清楚,这里做一些细致的讲解。

  position:relative; 表示相对定位,被定位了这个属性的标签在所属的范围内可以进行上下左右的移,这里的移动与padding或是margin所产生的位置变化是不一样的。padding与margin是元素本身的一种边距与填充距离并不是真正的移动,而被定义为relative的元素是真正的移动,这所产生的移动距离是从margin的外围到父级标签内侧之间这一段。

  position:absolute; 表示绝对定位,如果定义了这个属性的元素,其位置将依据浏览器左上角的0点开始计算,并且是浮动正常元素之上的。那么当你需要某个元素定位在浏览器内容区的某个地方就可以用到这个属性。

  于是产生了一个问题:现在大家做的网页大部分是居中的,如果我需要这个元素跟着网页中的某个元素位置,不论屏幕的分辨率是多少它的位置始终是针对页内的某个元素的,靠单纯的absolute是不行的。

  正确的解决方法是:在元素的父级元素定义为position:relative;(这里可以是祖父级,也可以是position:absolute;,多谢谢old9的提出)需要绝对定位的元素设为position:absolute;

  这样再设定top,right,bottom,left的值就可以了,这样其定位的参照标准就是父级的左上角padding的左上侧。

  如对于本文有任何疑问、意见以及建议,请在文章底部的留言板上留言。或者去天极设计在线主题社区讨论。

  更多精彩,尽在天极设计在线design.yesky.com!


电脑美术设计热门专区


设计软件视频教程大全

设计软件经典教程

设计人生——数码设计人访谈实录集
·软件论坛重装上线
·精彩网页素材
·照片处理专区
·设计软件经典教程集粹

  阅读关于 CSS 网页 设计 教程 的全部文章
网友关注
最新上市
编辑推荐
欢迎订阅天极网RSS聚合资讯:http://www.yesky.com/index.xml