CSS：如何将两个元素堆叠在一起而不指定高度

在本文中，我们将介绍如何使用CSS将两个元素堆叠在一起，而不需要指定具体的高度。这个技巧在网页设计中非常实用，可以用于创建各种有趣和独特的效果。

阅读更多：CSS 教程

使用相对定位（position: relative）

要实现两个元素的堆叠效果，我们可以使用相对定位（position: relative）来实现。相对定位是指元素在正常文档流中的位置，并通过top、bottom、left、right属性来调整其位置。

下面是一个示例，展示了如何使用相对定位将两个元素堆叠在一起：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
    }

    .box1, .box2 {
      position: relative;
      width: 200px;
      height: 200px;
    }

    .box1 {
      background-color: #FF0000;
      top: 0;
      left: 0;
    }

    .box2 {
      background-color: #00FF00;
      top: 20px;
      left: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</body>
</html>

在这个示例中，我们创建了一个包含两个盒子的容器。box1是红色的，box2是绿色的。通过设置它们的top和left值，我们可以将box2相对于box1进行调整。在这个例子中，box2相对于box1向下和向右移动了20像素。

使用绝对定位（position: absolute）

除了相对定位，我们还可以使用绝对定位（position: absolute）来实现元素的堆叠效果。绝对定位会将元素相对于最近的已定位祖先元素进行定位，如果不存在已定位的祖先元素，则会相对于初始包含块进行定位。

下面是使用绝对定位实现元素堆叠的示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
    }

    .box1, .box2 {
      position: absolute;
      width: 200px;
      height: 200px;
    }

    .box1 {
      background-color: #FF0000;
      top: 0;
      left: 0;
    }

    .box2 {
      background-color: #00FF00;
      top: 20px;
      left: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</body>
</html>

在这个示例中，我们同样使用了一个包含两个盒子的容器。box1和box2的position属性都被设置为absolute，这样它们就可以相对于容器进行定位。通过设置top和left值，我们可以将box2相对于box1进行调整。

使用负边距（negative margin）

除了相对定位和绝对定位，我们还可以使用负边距（negative margin）来实现元素的堆叠效果。负边距是指将元素的边距向外延伸到其相邻元素的区域。

下面是使用负边距实现元素堆叠的示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
    }

    .box1, .box2 {
      width: 200px;
      height: 200px;
    }

    .box1 {
      background-color: #FF0000;
      margin: 0;
    }

    .box2 {
      background-color: #00FF00;
      margin: -20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</body>
</html>

在这个示例中，我们同样使用了一个包含两个盒子的容器。box1和box2的margin属性都被设置为0，box2的margin再设置为-20像素。这样一来，box2就会相对于box1上移20像素，从而实现了元素堆叠的效果。