Div的重叠和覆盖可以使用z-index和position:absolute决定定位来实现,具体实现代码如下:
<!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=utf-8" />
<title>test</title>
<style>
#box1{
z-index:2;
width:100px;
height:100px;
background:#FF99FF;
position:absolute;
top:0;
left:120px;
}
#box2{
z-index:1;
width:200px;
height:200px;
background:#66FFFF;
position:absolute;
top:0;
left:0;
}
.btn{
margin-top:220px;
}
</style>
<script>
function change(){
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
box1.style.zIndex="1";
box2.style.zIndex="2";
}
</script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div class="btn">
<input name="" type="button" value="交换" οnclick="change()"/></div>
</body>
</html>
说明:在底下的DIV样式添加半透明样式: filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;
可以实现半透明div作为背景,上边覆盖一层不透明的div呈现重要内容,效果不错。
详情代码如下:
.backgroudDiv{
text-align:center;
width:100%;
height:900px;;
background-color:#000;
margin:0 0 0 0;
padding-top:160px;
position:absolute;
z-index:1;
filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;
}
.maskDiv{
text-align:center;
width:600px;
height:auto;
left:30%;
top:20%;
padding:0 0 0 0;
position:absolute;
z-index:2;
<div class="content">
</div>
<div class="maskDiv">显示内容</div>