DIV绝对定位 position、z-index、top、right、bottom和left属性

java-mans

浏览: 11630051 次

最近访客更多访客>>

morelily

devcang

serisboy

chjinniu

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (15567)

社区版块

存档分类

2012-08 ( 1467)
2012-07 ( 1872)
2012-06 ( 1125)
更多存档...

转载自：

http://wujt.iteye.com/blog/1181558

一、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 http://www.w3.org/1999/xhtml">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 http://www.w3.org/1999/xhtml">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,v) {
if (v) 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等特性。

///////////////////////
div总是被select遮挡的解决方法
//////////////////////////
html>
<head>

<meta http-equiv="Content-Type" c>

<title>div被select遮挡的解决方法——脚本之家</title>
</head>
<body>

<iframe style="position:absolute;z-index:9;width:expression
(this.nextSibling.offsetWidth);height:expression
(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression
(this.nextSibling.offsetLeft);" frameborder="0" ></iframe>

<form id="Form1" method="post">

<div style="z-index:10;position:absolute;background-
color:blue;width:100;height:18;overflow:hidden;" >aaaaaaa<br/>bbbbbbb<br/>ccccccc</div>

<select style="width:200" ><option>test0<option>test1<option>test2<option>test3</select>

<br/>

<pre>

Div被Select挡住，是一个比较常见的问题。

有的朋友通过把div的内容放入iframe或object里来解决。

可惜这样会破坏页面的结构，互动性不大好。
这里采用的方法是：
虽说div直接盖不住select

但是div可以盖iframe，而iframe可以盖select,

所以，把一个iframe来当作div的底，

这个div就可以盖住select了.
</pre>

</form>

</body>
</html>

function install(){
var propertiesCount = chenhao.count();

//var object = document.getElementById('test');
var object = document.body;

createElement(object,chenhao.name,1);
createElement(object,chenhao.email,2);
createElement(object,chenhao.website,3);

createElement(object,chenhao['name'],4);
createElement(object,chenhao['email'],5);
createElement(object,chenhao['website'],6);

//document.("test").innerHTML = chenhao.name;
//document.getElementById("test").innerHTML = chenhao.email;
//document.getElementById("test").innerHTML = chenhao.website;
}

function createElement(object,content,index){
var div = document.createElement("div");
div.setAttribute('style','position:absolute;top:'+parseInt(index*20)+'px;left:100px');
div.innerHTML=content+'';
object.appendChild(div);

}

分享到：