CSS 将第二个 div 置于第一个 div 之上，而不使用绝对定位或更改 HTML 结构

在本文中，我们将介绍如何使用 CSS 将第二个 div 置于第一个 div 之上，而不使用绝对定位或更改 HTML 结构的方法。

阅读更多：CSS 教程

方法一：使用负边距的相对定位

可以使用相对定位和负边距来实现将第二个 div 放在第一个 div 之上的效果。首先，我们需要确保这两个 div 的父容器具有相对定位。接下来，对第二个 div 使用相对定位，并设置一个负的 z-index 值，使其位于第一个 div 的上方。

HTML 结构示例：

<div class="container">
  <div class="first-div">第一个 div</div>
  <div class="second-div">第二个 div</div>
</div>

CSS 样式示例：

.container {
  position: relative;
}

.second-div {
  position: relative;
  z-index: -1;
}

使用这种方法，第二个 div 将位于第一个 div 之上。

方法二：使用 flexbox

另一种方法是使用 flexbox 布局。将两个 div 放在一个父容器中，并使用 flexbox 的 order 属性来控制它们的顺序。默认情况下，order 的值为 0，我们可以将第二个 div 的 order 值设置为负值，使其在视觉上出现在第一个 div 之上。

HTML 结构示例：

<div class="container-flex">
  <div class="first-div-flex">第一个 div</div>
  <div class="second-div-flex">第二个 div</div>
</div>

CSS 样式示例：

.container-flex {
  display: flex;
}

.first-div-flex {
  order: 1;
}

.second-div-flex {
  order: -1;
}

使用这种方法，我们可以轻松地将第二个 div 放在第一个 div 的上方。

方法三：使用 position: sticky

另一种实现的方法是使用 CSS 的 position: sticky 属性。将第一个 div 的位置设置为 sticky，并设置 top: 0，然后将第二个 div 放在第一个 div 下面。这样，第二个 div 将会在滚动时保持在固定位置，并出现在第一个 div 的上方。

HTML 结构示例：

<div class="container-sticky">
  <div class="second-div-sticky">第二个 div</div>
  <div class="first-div-sticky">第一个 div</div>
</div>

CSS 样式示例：

.container-sticky {
  position: relative;
  height: 100vh; /* 设置父容器的高度，使其具有滚动条 */
}

.first-div-sticky {
  position: sticky;
  top: 0;
}

使用这种方法，第二个 div 将会在滚动时出现在第一个 div 的上方。

总结

本文介绍了三种在不使用绝对定位或更改 HTML 结构的情况下，将第二个 div 放在第一个 div 之上的方法。第一种方法使用负边距的相对定位，第二种方法使用 flexbox 布局的 order 属性，第三种方法使用 position: sticky 属性。根据具体需求和场景的不同，可以选择适合的方法来实现所需效果。无论选择哪种方法，都能够轻松实现将第二个 div 放在第一个 div 之上的效果。