z-index

来源：互联网发布：洗水标打印软件编辑：程序博客网时间：2024/04/30 04:30

一。上方高度自适应。下方高度固定。

上方div中的内容可以覆盖下方div。

</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>