一。上方高度自适应。下方高度固定。
上方div中的内容可以覆盖下方div。
<!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>eeeeee</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none;}
html { height:100%; overflow:hidden; background:#fff;}
body { height:100%; overflow:hidden; background:#fff;}
.main { position:absolute; left:0; top:0; bottom:165px; right:0;background-color:red;z-index:2;}
.bottom {position:absolute; left:0; bottom:0; right:0; height:165px;background-color:#ee4; z-index:1;}
/*---ie6---*/
html { *padding:0 0 165px 0;}
.main { *height:100%; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
.bottom { *height:165px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
.mainup{position:absolute;z-index:4;top:20px;width:100%;background-color:#C6C;opacity:0.4; filter:alpha(opacity=10);}
.indextitle{width:600px;margin:0 auto;margin-top:40px;margin-bottom:25px;text-align:center;}
</style>
</head>
<body>
<div class="main">
<div class="mainup">
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
12313123<br/>
</div>
</div>
<div class="bottom">
</div>
</body>
</html>
二.
<!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>z-index不起作用之第一个爸爸不顶用 >> 张鑫旭-鑫空间-鑫生活</title>
<link rel="shortcut icon" href="http://www.zhangxinxu.com/zxx_ico.png" />
<style type="text/css">
#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
.btn{position:absolute; z-index:1; left:300px; top:180px; width:150px; height:30px;}
img{padding:3px; background:white; border:1px solid #dddddd;}
</style>
</head>
<body>
<div id="blank"></div>
<input id="btn" class="btn" type="button" value="给第一老爸添加层级" />
<div id="obj" style="position:relative;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>
<script type="text/javascript">
var btn = document.getElementById("btn");
var obj = document.getElementById("obj");
var flag = 1;
btn.onclick = function(){
if(flag){
this.value = "给第一老爸去掉层级";
obj.style.zIndex = "1";
obj.style.zoom = 1;
flag = 0;
}else{
this.value = "给第一老爸添加层级";
obj.style.zIndex = 0;
flag = 1;
}
};
</script>
</body>
</html>