使用z-index和position:absolute實現DIV覆蓋和重疊，可實現半透明背景，上邊漂浮一層不透明的div層。
阿新 • • 發佈：2019-01-10
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="交換" onclick="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>