這個遮罩問題是這樣的：
一個div裏面還有個div ， 要點擊裏面的div時，放大顯示，並在其後顯示一個遮罩，把其他的都遮住。
其中外面的div是fixed的，這個就比較難搞了， 裏面的div指定一個更高的z-index沒用。
一遮罩，就把2個div都遮住了。
經過研究，終於解決了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
html, body {
margin: 0;
padding: 0;
}
#div_con {
width: 300px;
height: 300px;
padding: 10px;
text-align: center;
border: 1px solid red;
background: #faa;
z-index: 100;
position: fixed;
left: 100px;
top: 100px;
}
#div_box {
width: 100px;
height: 100px;
border: 1px solid green;
background: #bfb;
}
</style>
<div id='div_con'>
<div id='div_box' onclick='max_me()'>
點我呀
</div>
</div>
<script src='http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js'></script>
<script>
//初始化遮罩層
function initMyMask() {
$("<div id='div_my_mask'></div>").css({
position: 'absolute',
top: 0,
left: 0,
backgroundColor: "#444",
opacity: 0.8,
zIndex: 300
})
.height($(document).height())
.width($(document).width()).hide().appendTo("body");
$('#div_my_mask').click(function () {
$(this).hide();
$('#div_box').css({position: 'inherit', width: 100, height: 100});
});
}
initMyMask();
function max_me() {
console.log(max_me);
let t_left = $('#div_con').offset().left;
let t_top = $('#div_con').offset().left;
$('#div_con').css({position: 'inherit', marginLeft: t_left, marginTop: t_top});
$('#div_box').css({position: 'absolute', left: 500, top: 200, width: 500, height: 300});
$('#div_box').css('zIndex', 1000);
$("#div_my_mask").show();
}
</script>
</html>
另外，對於不方便遮住的情況，可以分成幾塊來遮住
