在網頁設計中，使用div疊加技術可以實現很多有趣的效果。而jQuery庫是目前最流行的JavaScript庫之一，它可以幫助我們快速實現交互效果。在本文中，我們將介紹如何使用jQuery庫來實現div疊加效果。

//HTML代碼
<div class="mask"></div>
<div class="box"></div>
//CSS代碼
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /*半透明背景*/
}
.box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
background-color: #fff;
z-index: 999; /*在最上層*/
}
//JavaScript代碼
$(document).ready(function() {
//點擊遮罩層和彈窗均可關閉彈窗
$('.mask, .box').click(function() {
$('.mask').fadeOut();
$('.box').fadeOut();
});
//顯示彈窗
$('.showBox').click(function() {
$('.mask').fadeIn();
$('.box').fadeIn();
});
});

在上述代碼中，我們首先定義了一個半透明的遮罩層和一個彈窗，通過CSS設置其樣式。然后，通過jQuery的.ready()方法，在頁面加載完成后給遮罩層和彈窗添加點擊事件，使其可以關閉彈窗。最后，我們給一個按鈕添加點擊事件，點擊后顯示彈窗。

在使用div疊加技術時，我們需要給每個元素設置z-index屬性，從而控制它們的層次關系。在上述代碼中，我們給彈窗的z-index屬性設為999，這使得它在遮罩層之上，從而成為頁面中最上層的元素，實現了div疊加的效果。