在CSS中将两个盒子重叠

在 CSS 中，要让两个盒子重叠，你可以使用 `position` 属性和一些布局技术。主要有三种常见的方法：

1. **绝对定位** (position: absolute 或 position: fixed)：
将其中一个盒子设置为 `position: relative`，另一个设置为 `position: absolute` 并指定相对的位置。这样第二个盒子会相对于第一个盒子进行定位。

   .relative-box {
     position: relative;
   }
   
   .absolute-box {
     position: absolute;
     top: 20px; /* 指定偏移量 */
     left: 50px; /* 更改偏移位置 */
   }

2. **浮动** (float)：
通过浮动，可以让一个盒子“溢出”到其相邻的盒子之上。通常用于创建多列布局。

   .floating-box {
     float: left; /* 或者right */
   }

3. **z-index** 属性：
如果两个盒子都是相对定位，你可以使用 `z-index` 属性来控制它们的堆叠顺序。数值较大的盒子会覆盖数值较小的盒子。

   .box-a {
     z-index: 2; /* 让这个盒子在上面 */
   }
   .box-b {
     z-index: 1; /* 让这个盒子在下面 */
   }

请注意，重叠可能会导致元素布局混乱，因此在设计时应考虑清楚优先级和布局需求。