购买流程 付款方式 常见问题 在线提问  续租服务  购物车
首页 域名注册 虚拟主机 成品网站 企业邮局 服务器租用 VPS主机 云主机 智能建站 代理专区 客户中心
用户登陆
为何选择我们
  • 7年优质服务经验
  • 10万用户的共同选择
  • 更低的价格更好的服务
  • CNNIC四星级认证服务商
  • 拥有正规经营许可证(ICP)
  • 先进的解析技术10分钟生效
  • 6组DNS负载均衡更快更稳定
  虚拟主机域名注册-常见问题其他问题 → 其他问题


CSS定位中Position属性的absolute、 Relative的使用说明
作者:

CSS定位中Position、absolute、 Relative的一些用法心得

用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效 果时要考虑到定位问题。这就要用到Position属性等。 Position属性有四个值: static、fixed、absolute和relative,后面两个在布局中的定位里是经常用到的,顾名思义,absolute是指绝对定位,即将 对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。此时对象不具有边距,但 仍有补白和边框。ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置。
但 是,怎么个绝对法,又怎么个相对法呢?以前我一直没有仔细去研究它,到具体应用时有时会有点迷糊,我相信很多朋友也会有这样的问题。今天我特意测试了一 下,得出了以下结论:
1、当Position属性值为Relative时
对象原来占有的位置保 留,其后面的对象按原来文档流仍然保持原来的位置
Top的值表示对象相对原位置向下偏移的距离
bottom的值表示对象相对原位置向 上偏移的距离
两者同时存在时,只有Top起作用。
left的值表示对象相对原位置向右偏移的距离
right的值表示对象相 对原位置向左偏移的距离
两者同时存在时,只有left起作用。
2、当Position属性值为absolute时
对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来
Top的值表示对象上边框与浏览器窗口顶部的距离
bottom 的值表示对象下边框与浏览器窗口底部的距离
两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位 置不变。
left的值表示对象左边框与浏览器窗口左边的距离
right的值表示对象右边框与浏览器窗口右边的距离
两者同时 存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。
在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还 是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是 很有帮助的。


来源:
阅读:3316
日期:2012-03-06

【 双击滚屏 】 【 推荐朋友 】 【 收藏 】 【 打印 】 【 关闭 】 【 字体: 】 
上一篇:如何在IE浏览器标题栏上添加文字
下一篇:如何查找图片中的字体名称
  >> 相关文章
 
返回首页 |关于我们 | 联系我们 | 付款方式 | 广告联盟 | 有问必答 | 网站备案 | 独立控制面板 | 魔方网站
版权所有 春蕾网络|网站建设|网页制作|成都网站建设·严禁复制
在线客服: 点击发送消息给对方543672081 点击发送消息给对方670094759 点击发送消息给对方1021788917
服务热线:028-66298072 传真:028-83264841
信息反馈:业务咨询 技术问题 问题投诉 《中华人民共和国增值电信业务经营许可证》川B2-20030065号