一。上方高度自适应。下方高度固定。
上方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>
