CSS 如何定位两个div重叠

在本文中，我们将介绍如何使用CSS定位两个div重叠在一起的方法。

阅读更多：CSS 教程

绝对定位

一种方法是使用CSS的绝对定位。通过设置两个div的position属性为absolute，并使用top和left属性来控制它们的位置，可以实现div的重叠。下面是一个示例：

<div style="position: absolute; top: 50px; left: 50px;">Div 1</div>
<div style="position: absolute; top: 50px; left: 50px;">Div 2</div>

在上面的示例中，两个div都被设置为绝对定位，并且它们的top和left属性都设置为相同的值，所以它们在页面上重叠在一起。

相对定位

另一种方法是使用CSS的相对定位。通过设置两个div的position属性为relative，并使用top和left属性来控制它们的位置，可以实现div的重叠。下面是一个示例：

<div style="position: relative; top: 50px; left: 50px;">Div 1</div>
<div style="position: relative; top: -10px; left: 80px;">Div 2</div>

在上面的示例中，第一个div被设置为相对定位，并在页面上向下和向右移动了50个像素。第二个div也被设置为相对定位，并在页面上向上和向右移动了10个像素，以实现重叠效果。

堆叠顺序

当两个div重叠在一起时，它们的堆叠顺序由它们在HTML文档中的顺序决定。后面出现的元素将覆盖前面的元素。下面是一个示例：

<div style="position: absolute; top: 50px; left: 50px; background-color: red;">Div 1</div>
<div style="position: absolute; top: 50px; left: 50px; background-color: blue;">Div 2</div>

上面的示例中，第一个div设置了红色的背景色，第二个div设置了蓝色的背景色。由于第二个div在HTML文档中后出现，所以它会覆盖第一个div，最终显示为蓝色。

使用z-index属性

如果需要控制两个重叠的div的显示顺序，可以使用CSS的z-index属性。z-index属性定义了一个元素的堆叠顺序，值较大的元素会覆盖值较小的元素。下面是一个示例：

<div style="position: absolute; top: 50px; left: 50px; background-color: red; z-index: 2;">Div 1</div>
<div style="position: absolute; top: 50px; left: 50px; background-color: blue; z-index: 1;">Div 2</div>

在上面的示例中，第一个div的z-index属性为2，第二个div的z-index属性为1。因此，第一个div的堆叠顺序较高，会覆盖第二个div，导致第一个div显示为红色，第二个div显示为蓝色。