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

转载 2012年03月21日 15:32:13

转载自:

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

}

CSS中边偏移属性top,right,bottom,left

1:上边偏移属性    用来定义元素顶部偏移位置的大小。top: auto | length | percent    CSS属性实例 div{...
  • woshisap
  • woshisap
  • 2013年01月09日 10:12
  • 14748

position top bottom left right height z-index

一.DIV CSS left right top bottom定位 这四个CSS属性样式用于定位对象盒子,必须定义position属性值为absolute或者relative此取值方可生效。Left...

DIV CSS left right top bottom定位

DIV CSS left right top bottom定位 这四个CSS属性样式用于定位对象盒子,必须定义position属性值为absolute或者relative。 Left   ...

CSS之Background-Position left right center top buttom属性

1. background-position:left top; 背景图片的左上角和容器(container)的左上角对齐,超出的部分隐藏。 等同于 background-position:...
  • yja886
  • yja886
  • 2012年01月02日 11:03
  • 6840

Android学习笔记之屏幕宽高、状态栏宽高、标题宽高以及left()、top()、right()、bottom()

Android学习笔记之屏幕宽高、状态栏宽高、标题宽高以及left()、top()、right()、bottom()前言:  想学号安卓,这几个方法及属性你不得不学会怎么获取,当你学会了如何获取屏幕宽...

Andriod中绘(画)图----Canvas的使用详解 (附canvas.drawRect(left, top, right, bottom, paint)参数理解)

转载请注明出处:http://blog.csdn.net/qinjuning                由于在网络上找到关于Canvas的使用都比较抽象,也许是我的逻辑思维不太好吧,...

面试总结(4):top、left、right、bottom 和 translationX、translationY 和 scrollX,scrollY的区别

前言这是前几天面试的时候遇到的一个问题,之前没有专门去研究这三个概念的区别,所以就凭印象回答了这道题,回来就实际研究一下,发现自己回答还算可以吧。正文top、left、right、bottom经过我的...

position属性absolute与relative 详解 不为人知的(fixed)绝对定位(fixed相对于浏览器窗口=不动的div)

From:http://www.cnblogs.com/wiseblog/articles/4352007.html 总结: 当一个标签打上position:absolute绝对标签后,当我们...
  • henrypt
  • henrypt
  • 2016年12月02日 10:39
  • 1937

浅析CSS——元素重叠及position定位的z-index顺序

多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题。其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题...

元素重叠及position定位的z-index顺序

多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题。其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DIV绝对定位 position、z-index、top、right、bottom和left属性
举报原因:
原因补充:

(最多只允许输入30个字)