CSS 绝对定位但相对于父元素

在本文中，我们将介绍 CSS 中的绝对定位，并解释如何使用绝对定位的元素相对于其父元素进行定位。

阅读更多：CSS 教程

什么是绝对定位？

绝对定位是一种 CSS 定位机制，它使元素可以完全脱离文档流，并相对于其最近的非静态定位的祖先元素进行定位。相对于文档流中其他元素的位置，绝对定位的元素可以自由移动。
要使用绝对定位，需要将元素的 position 属性设置为 absolute。

绝对定位相对于父元素

默认情况下，绝对定位的元素是相对于文档的根元素进行定位的。然而，我们可以通过将其父元素的 position 属性设置为 relative，使绝对定位的元素相对于父元素进行定位。

下面是一个示例，其中一个绝对定位的元素相对于其父元素进行定位：

<!DOCTYPE html>
<html>
<head>
  <style>
    .parent {
      position: relative;
      width: 300px;
      height: 200px;
      border: 1px solid black;
    }
    .child {
      position: absolute;
      top: 50px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

在上面的示例中，父元素 .parent 的 position 属性设置为 relative，使其成为一个相对定位的容器。子元素 .child 的 position 属性设置为 absolute，并通过 top 和 left 属性相对于父元素进行定位。此时子元素 .child 相对于父元素 .parent 左上角位置的(50px, 50px)处定位。