CSS 如何使一个div放在另一个div后面

在本文中，我们将介绍如何使用CSS使一个div元素放在另一个div元素的后面。

阅读更多：CSS 教程

1. 使用z-index属性

要使一个div元素放在另一个div元素的后面，我们可以使用CSS的z-index属性。z-index属性定义了一个元素的堆叠顺序，具有较高z-index值的元素将覆盖具有较低z-index值的元素。

下面是一个示例，演示如何使用z-index属性：

HTML代码：

<div class="background"></div>
<div class="foreground">
  <h1>这是前景div</h1>
</div>

CSS代码：

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  z-index: 0;
}

.foreground {
  position: relative;
  z-index: 1;
}

在上面的示例中，我们使用两个div元素：一个background和一个foreground。background div用于呈现背景颜色，foreground div用于呈现文本。

在background div的CSS样式中，我们使用了position:absolute来使它的位置相对于其最近的具有定位（非static）的祖先元素。然后，我们使用top:0和left:0使其填满整个父元素。background div的z-index值被设置为0，使它处于较低的堆叠顺序。

在foreground div的CSS样式中，我们设置了z-index为1，使其处于较高的堆叠顺序。这样，foreground div就会覆盖background div，使其放在后面。

2. 使用负的margin值

另一种实现将一个div放在另一个div后面的方法是使用负的margin值。

以下是一个示例：

HTML代码：

<div class="background"></div>
<div class="foreground">
  <h1>这是前景div</h1>
</div>

CSS代码：

.background {
  width: 200px;
  height: 200px;
  background-color: blue;
}

.foreground {
  margin-top: -200px;
}

在上面的示例中，我们使用了相同的HTML结构，但是我们没有使用绝对定位和z-index属性。相反，我们将foreground div的margin-top值设置为负的background div的高度，即-200px。这将导致foreground div向上移动，并放在background div的后面。