动态网站制作指南



当前位置 > 网站建设学院 > 网页制作 > CSS教程 Rss

详解CSS的定位语法应用


发表日期:2007-11-30


      一、CSS定位:position

  语法:

  position : static | absolute | fixed | relative

  取值:

  static  :默认值。无特殊定位,对象遵循HTML定位规则。

  absolute  :将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义。

  fixed  :未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。

  relative  :对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置。

  说明:检索对象的定位方式。

  设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠。此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border )。

      要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递。

  设置此属性值为 relative 会保持对象在正常的HTML流中,但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的,在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外,滚动条不会出现。

  内容的尺寸会根据布局确定对象的尺寸。例如,设置一个 div 对象的 height 和 position 属性,则 div 对象的内容将决定它的宽度( width )。

  此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 position 。

  示例:

  div { position:relative; top:-3px }

  二、CSS定位:Z-index

  语法:

  z-index : auto | number

  取值:

  auto  :默认值。遵从其父对象的定位
  number  :无单位的整数值。可为负数

  说明:

  检索或设置对象的层叠顺序。

  较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值,那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象,此属性的 number 值为正数的对象会在其之上,而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。

  此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。这个属性不会作用于窗口控件,如 select 对象。在IE5.5+中, iframe 对象开始支持此属性。而在之前的浏览器版本中, iframe 对象是窗口控件,会忽略此属性。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 zIndex 。

  示例:

  div { position:absolute; z-index:3; width:6px; }

  三、CSS定位:top

  语法:

  top : auto | length

  取值:

  auto  :默认值。无特殊定位,根据HTML定位规则在文档流中分配。

  length  :由浮点数字和单位标识符组成的长度值 | 百分数。必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。

  说明:

  检索或设置对象与其最近一个具有定位设置的父对象顶边相关的位置。

  此属性仅仅在对象的定位( position )属性被设置时可用。否则,此属性设置会被忽略。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 top 。其值为一字符串,所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posTop , pixelTop 等运行时特性,以及对象的offsetTop 等特性。

  示例:

以下是引用片段:
  div { position: absolute; top: 1in; }
  div { position:relative; top:-3px; left:6px; } 


  四、CSS定位:right

  语法:

  right : auto | length

  取值:

  auto  :默认值。无特殊定位,根据HTML定位规则在文档流中分配。

  length  :由浮点数字和单位标识符组成的长度值 | 百分数。必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。

  说明:

  检索或设置对象与其最近一个具有定位设置的父对象右边相关的位置。

  此属性仅仅在对象的定位( position )属性被设置时可用。否则,此属性设置会被忽略。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 right 。其值为一字符串,所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posRight , pixelRight 等运行时特性。

  示例:

以下是引用片段:
  div { position: absolute; right: 1in; }
  div { position:relative; top:-3px; right:6px; }


  五、CSS定位:bottom

  语法:

  bottom : auto | length

  取值:

  auto :默认值。无特殊定位,根据HTML定位规则在文档流中分配。

  length :由浮点数字和单位标识符组成的长度值 | 百分数。必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。

  说明:

  检索或设置对象与其最近一个具有定位设置的父对象底边相关的位置。此属性仅仅在对象的定位( position )属性被设置时可用。否则,此属性设置会被忽略。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 bottom 。其值为一字符串,所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posBottom , pixelBottom 等运行时特性。

  示例:

以下是引用片段:
  div { position: absolute; bottom: 1in; } 
  div { position:relative; bottom:6px; }


  六、CSS定位:left

  语法:

  left : auto | length

  取值:

  auto  :默认值。无特殊定位,根据HTML定位规则在文档流中分配。

  length  :由浮点数字和单位标识符组成的长度值 | 百分数。必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。

  说明:

  检索或设置对象与其最近一个具有定位设置的父对象左边相关的位置。

  此属性仅仅在对象的定位( position )属性被设置时可用。否则,此属性设置会被忽略。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 left 。其值为一字符串,所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posLeft , pixelLeft 等运行时特性,以及对象的offsetLeft 等特性。

  示例:

以下是引用片段:
  div { position: absolute; left: 1in; }
  div { position:relative; top:-3px; left:6px; } 

关注此文的读者还看过:
·2012-2-8 13:19:40 怎样用CSS解决英文单词的自动换行的问题
·2012-2-8 13:18:07 CSS教程:十步学会用css建站
·2012-2-8 13:16:44 CSS初学教程 如何修改blog中的CSS
·2012-2-8 13:14:59 想让DIV居中 如何编写CSS
·2012-2-8 13:10:44 div css表单布局的五个小技巧
·2012-2-8 13:09:01 CSS定义超链接四个状态的正常顺序
·2012-2-8 13:08:57 CSS条件注释
·2012-2-8 13:07:54 css应用:单击table,使点击的行变色
·2012-2-8 13:00:59 css实现图片横向排列,溢出隐藏\滚动条横向拖动
站长推荐 PS笔刷下载 在线翻译 系统进程 广告代码
  发表评论
姓 名: 验证码:
内 容:
教程搜索服务
项目外包信息
·找长期合作的网页设计师(切图+
·SNS 网站开发
·云南大蓄文化传播有限公司网站设
·药品代购网站
·FLASH网站汉化
·求高手帮我设计一个减肥产品网站
·flash首页制作(已有设计图)
·寻求长期外包人员
·网页页面修改
·北京地区 flash动画合作
·佛山网站建设+263企业邮箱找我。
·ecshop+Discuz! X2+ Home会员整
·寻找网站建设团队或者个人合伙
·LOGO设计外包
·企业网后台程序外包
发布信息 浏览信息
邮件订阅服务
输入你的邮件地址,你将不会错过任何关于<CSS教程>的内容


网页制作文章分类
Dreamweaver教程
FrontPage教程
Javascript教程
CSS教程
DHTML教程
HTML教程
网页特效
心得技巧
Discuz!专栏
站长工具:Google PR查询|Alexa排名查询|网站速度测试|CSS在线编辑器|OPEN参数生成器|弹出式窗口代码产生器|密码登录生成器|在线按钮生成器|Meta标签生成器|邮箱图标在线生成|多色彩特效字代码生成器|网页代码调试器|在线FTP登陆|Flash取色器|配色代码对照表|配色辞典|CSS生成器|CSS在线压缩|广告代码|框架网页代码生成器|js/vbs加密|md5加密|进制转换|UTF-8 转换工具|在线调色板|Html转换js|Html转换asp|Html转换php|Html转换perl
实用工具:汉字翻译拼音|拼音字典|在线翻译|天气预报|火星文|在线网速测试|符号对照表|个税计算|理财工具|黄金价格|购房银行按揭利率计算|汇率查询|经典小工具|汉字简繁转换|普通单位换算|公制单位换算|生辰老黄历|国内电话区号|国家代码与域名缩写|文字加密解密|元素周期表|健康查询|世界时间|全国各地车牌查询|全国车辆交通违章查询|万年历|二十四节气|汉字横竖排版|手机号码查询|计算器|ip搜索
广告刊登 | 版权声明 | 联系我们 | 加入收藏 | RSS订阅
Copyright © 2000-2012 www.knowsky.com All rights reserved | 沪ICP备05001343号