在CSS中，盒子疊加可以通過設(shè)置position屬性來實現(xiàn)。position屬性有五個值：static、relative、absolute、fixed和sticky。relative、absolute、fixed和sticky都可以實現(xiàn)盒子的疊加。
1、相對定位（Relative Positioning）：
當(dāng)設(shè)置一個元素的position屬性為relative時，該元素仍然保持在文檔流中的位置，但是可以通過top、right、bottom和left屬性來調(diào)整其在文檔流中的位置。
2、***定位（Absolute Positioning）：
當(dāng)設(shè)置一個元素的position屬性為absolute時，該元素會脫離文檔流，并相對于其***近的已定位祖先元素（即包含position:relative、position:absolute或position:fixed的元素）進行定位，如果沒有已定位的祖先元素，那么它會相對于初始包含塊（即HTML元素）進行定位。
3、固定定位（Fixed Positioning）：
當(dāng)設(shè)置一個元素的position屬性為fixed時，該元素會脫離文檔流，并相對于瀏覽器窗口進行定位，無論頁面如何滾動，它都會保持在相同的位置。
4、粘性定位（Sticky Positioning）：
當(dāng)設(shè)置一個元素的position屬性為sticky時，該元素在滾動到某個位置之前為相對定位，之后為固定定位，這通常用于創(chuàng)建“粘性”菜單或?qū)Ш綑凇?/p>
下面是一個簡單的示例，展示如何實現(xiàn)盒子的疊加：
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
position: relative;
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</body>
</html>在這個示例中，.box1元素使用相對定位，而.box2元素使用***定位。.box2元素會疊加在.box1元素的上方，并且可以通過調(diào)整其top和left屬性來調(diào)整其在文檔流中的位置。
