查看:2241|回复:0
如何实现div的重叠发表时间:2012-07-22 10:03:50

大虾

0分享0主题0帖子

学徒一级

(初出茅庐)

外层用relative相对定位,里面用absolute绝对定位,就能很好的实现你的要求了。z-index是用来控制div的z轴的。数值越高,越优先被显示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
div#a1{position:relative;} 
div#a2{background-color:#eeeeee;position:absolute;z-index:1}
div#a3{background-color:#ffc000;position:absolute;z-index:2}
</style>
</head>
<body>
<div id="a1">
    <div id="a2" >
       1111111111111111111111<br/>
         1111111111111111111111<br/>
         1111111111111111111111<br/>
         1111111111111111111111<br/>
   </div>
   <div id="a3" >
         2222222222222222222222

</div>
</div>
</body>
</html>

注意:

z-index的使用:

通过对div的top和left定位,能很好的理解在页面坐标上的横轴和纵轴,那么当div层叠的时候,需要控制div的层叠顺序,哪个在上,哪个在下,实际上我们可以把网页看作是个三维坐标,x轴是横轴,y轴是纵轴,z轴垂直于网页,z轴上的点离原点越远,他的z值越高,形象的可以这样来描述,当某个div z轴的值越大,他离原点就越远,离浏览者的眼睛就越近,那么这个div就在其他的层之上,那么这个属性就是z-index,这个属性没有单位,默认z-index属性为0,数值越大越在上面。

总结:z-index默认值为0,z-index越大容器的显示越在前,z-index仅对relative,absolute,fixed有效。附position属性:

Static:静态定位。如果你没有设置position属性,那么缺省就是static。top,left,bottom,right等属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。

Relative:相对定位。元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍然会分配给它,它两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走。

Absolute:绝对定位。元素将按照包含它的元素的位置进行调整,比如它嵌套在另一个绝对定位的元素中,那么就相对于那个元素定位。

Fixed:固定定位。元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。形象点说,上下拉动滚动条的时候,fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。

您需要登录以后才可以回帖    登录|注册