css让两个div重叠（怎么让两个div重合）

CSS 让两个 div 重叠

简介

在 CSS 中，可以通过使用 `position` 属性来让两个 div 元素重叠。通过设置不同的 `position` 值，可以控制元素在文档流中的位置和层级关系。

多级标题

### 绝对定位 (absolute positioning)### 相对定位 (relative positioning)### 固定定位 (fixed positioning)### 内容详细说明

绝对定位 (absolute positioning)

使用 `position: absolute;` 将元素从正常的文档流中移除，并根据其相对于父元素或文档窗口的位置进行定位。绝对定位元素可以重叠其他元素，无论它们在 HTML 代码中出现的顺序如何。```css .div1 {position: absolute;top: 10px;left: 20px;width: 100px;height: 100px; }.div2 {position: absolute;top: 50px;left: 50px;width: 50px;height: 50px; } ```

相对定位 (relative positioning)

使用 `position: relative;` 让元素相对于其正常位置进行偏移。相对定位元素不会从文档流中移除，但可以通过 `top`、`right`、`bottom` 和 `left` 属性对其进行位置调整。```css .div1 {position: relative;left: 20px; }.div2 {position: relative;top: 10px;left: 50px; } ```

固定定位 (fixed positioning)

使用 `position: fixed;` 让元素相对于浏览器窗口进行固定定位。固定定位元素始终保持其位置，即使页面滚动也依然如此。```css .div1 {position: fixed;top: 0;left: 0;width: 100%;height: 100%; }.div2 {position: fixed;top: 50px;left: 50px;width: 50px;height: 50px; } ```

注意：

重叠的元素会遮挡其下方的元素。

绝对定位和固定定位元素不会影响文档流，因此它们不会影响其他元素的位置。

在使用定位时，一定要考虑页面响应性和不同设备上的显示效果。