HTML 使用CSS在父元素上方显示子元素

在本文中，我们将介绍如何使用CSS将子元素显示在父元素上方。这种效果可以通过改变元素的位置和堆叠顺序来实现，使得子元素可以覆盖父元素。

阅读更多：HTML 教程

使用position属性

为了实现子元素覆盖父元素的效果，我们可以使用position属性。position属性定义了元素在文档中的定位方式，并且结合其他属性可以改变元素的层级关系。

常用的position属性值有：
– static：默认值，元素在正常文档流中定位；
– relative：相对定位，相对于元素在正常文档流中的位置进行定位；
– absolute：绝对定位，相对于最近的已定位祖先元素进行定位；
– fixed：固定定位，相对于浏览器窗口进行定位。

要实现子元素在父元素上方显示的效果，我们可以将子元素设置为绝对定位，并通过z-index属性设置堆叠顺序。

下面是一个示例，展示了如何使用position和z-index属性将子元素显示在父元素上方：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: lightgray;
}
.child {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 1;
}
</style>
</head>
<body>

<div class="container">
  <div class="child"></div>
</div>

</body>
</html>

在上面的示例中，我们创建了一个容器元素（class为container）和一个子元素（class为child）。容器元素使用relative定位，子元素使用absolute定位，并通过top和left属性指定了在容器元素内的位置。通过设置子元素的z-index属性为1，我们将其显示在父元素上方。

通过浏览器查看上述代码的运行结果，你会看到子元素被放置在父元素的上方。

使用负边距

除了使用position属性，我们还可以使用负边距来实现子元素在父元素上方显示的效果。通过为子元素设置负的上边距或左边距，可以将其相对于父元素向上或向左移动，从而实现覆盖的效果。

下面是一个示例，展示了如何使用负边距将子元素显示在父元素上方：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: lightgray;
}
.child {
  margin-top: -50px;
  margin-left: -50px;
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>
</head>
<body>

<div class="container">
  <div class="child"></div>
</div>

</body>
</html>