使用z-index和position:absolute实现DIV覆盖和重叠，可实现半透明背景，上边漂浮一层不透明的div层。

最新推荐文章于 2023-06-23 18:13:48 发布

爱跳舞的铅笔头

最新推荐文章于 2023-06-23 18:13:48 发布

阅读量1w

点赞数 1

分类专栏： css html

本文链接：https://blog.csdn.net/baohuan_love/article/details/52796728

版权

html 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

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;