position、z-index、top、right、bottom和left属性

返回文章首页

创建时间：一月 4th, 2008修改时间：一月 4th, 2008 Traffic(494)

一、Position

1、语法：position:static/ absolute / fixed / relative

2、参数：

（1）static：默认值，无特殊定位，对象遵循HTML定位规则。

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

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

（4）fixed：对象定位遵从绝对（absolute）方式。

3、说明：

对象的定位方式。

设置此属性值为absolute会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同z-index属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。

此时对象不具有外边距margin，但仍有内边距padding和边框border。

对应的脚本特性为：position。

4、示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" language="javascript"> function selA(id) { switch(id) { case "1": document.getElementById("subobj").style.position = "static"; break; case "2": document.getElementById("subobj").style.position = "absolute"; break; case "3": document.getElementById("subobj").style.position = "relative"; break; case "4": document.getElementById("subobj").style.position = "fixed"; break; } } </script> <style type="text/css"> #all { width:190px; height:95px; padding:10px 0 0 10px; border:1px #000 solid; position:relative; } #subobj { width:100px; height:50px; border:1px #000 solid; bottom:9px; position:static; } #sel { margin-top:5px; } select { width:200px; } </style> </head> <body> <div id="all"> <div id="subobj">子对象1</div> </div> <div id="sel"><select onchange="selA(this.value)"><option value="1">static</option><option value="2">absolute</option><option value="3">relative</option><option value="4">fixed</option></select></div> </body> </html>

5、提示：

（1）由上面的例子可以看出，只有position属性值为absolute或relative时top、right、bottom、left才有效。

（2）目前还不支持position:fixed的属性值。

二、z-index

1、语法：z-index:auto/ number

2、参数：

（1）auto：默认值，遵从其父对象的定位。

（2）number：无单位的整数值，可为负数。

3、说明：

设置对象的层叠顺序。

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

此属性仅仅作用于position属性值为relative或absolute的对象上。

对应的脚本特性为：zIndex。

4、示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" language="javascript"> function selA(id,flg) { if (flg) obj = "subobj"; else obj = "subobj2"; switch(id) { case "0": document.getElementById(obj).style.zInex = 0; break; case "1": document.getElementById(obj).style.zIndex = 10; break; case "2": document.getElementById(obj).style.zIndex = -10; break; } } </script> <style type="text/css"> #all { width:190px; height:95px; padding:10px 0 0 10px; border:1px #000 solid; position:relative; } #subobj { width:100px; height:50px; border:1px #000 solid; top:10px; position:absolute; background-color:#09C; } #subobj2 { width:100px; height:50px; border:1px #000 solid; top:10px; position:absolute; background-color:#CCC; } #sel { margin-top:5px; } select { width:95px; } </style> </head> <body> <div id="all"> <div id="subobj">子对象1</div> <div id="subobj2">子对象2</div> </div> <div id="sel"> <select onchange="selA(this.value,1)"><option value="0">对象1</option><option value="1">10</option><option value="2">-10</option></select> <select onchange="selA(this.value,0)"><option value="0">对象2</option><option value="1">10</option><option value="2">-10</option></select> </div> </body> </html>

5、提示：

（1）z-index只有position属性的值为relative或absolute时才有效。

三、Top、Right、Bottom、Left

四个属性的设置都是相同的，下面以Top为例。

1、语法：top:auto/ length

2、参数：

（1）auto：默认值，无特殊定位，根据HTML定位规则在文档流中分配。

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

3、说明：

设置对象与其最近一个定位的父对象顶部相关的位置。

对应的脚本特性为：top。其值为一字符串，所以不可用于脚本中的计算。请使用style对象的posTop，pixelTop，以及对象的offsetTop等特性。

Posted by: 近水社区

相关文章：

常用CSS属性（Traffic：303 | Posted By：近水社区）

相关模板：

暂无相关模板

上一篇：width、height和overflow属性

Comments(2)

dasfd

五月 5th, 2008Posted by: asdf29wga#43.come

fdsaf

五月 5th, 2008Posted by: asdf30wga#43.come

position、z-index、top、right、bottom和left属性

Comments(2)

话题搜索

文章推荐

留言修改：