关闭

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

标签: divobjectborderiframe文档function
1142人阅读 评论(0) 收藏 举报
分类:

转载自:

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);

}

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:207734次
    • 积分:3105
    • 等级:
    • 排名:第11823名
    • 原创:55篇
    • 转载:369篇
    • 译文:1篇
    • 评论:22条
    文章分类
    最新评论