CSS 父元素的position属性是absolute，子元素的position属性是relative或者反之

在本文中，我们将介绍当父元素的position属性是absolute时，子元素的position属性是relative的效果，以及当父元素的position属性是relative时，子元素的position属性是absolute的效果。

阅读更多：CSS 教程

父元素的position属性是absolute，子元素的position属性是relative

当父元素的position属性被设置为absolute时，它不再占据文档流中的位置，并且会相对于其最近的具有定位属性（position为relative、absolute、fixed或sticky）的祖先元素进行定位。这时，如果子元素的position属性被设置为relative，则它会相对于父元素进行定位。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    #parent {
      position: absolute;
      top: 50px;
      left: 50px;
      border: 1px solid black;
    }

    #child {
      position: relative;
      top: 20px;
      left: 20px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div id="parent">
    <div id="child">
      This is the child element.
    </div>
  </div>
</body>
</html>

在上面的代码中，父元素的position被设置为absolute，而子元素的position被设置为relative。父元素被绝对定位到距离顶部和左边各50像素的位置，子元素相对于父元素定位，距离父元素的顶部和左边各20像素。

父元素的position属性是relative，子元素的position属性是absolute

当父元素的position属性被设置为relative时，它仍然占据文档流中的位置，但是它可以作为绝对定位元素的参考点。如果子元素的position属性被设置为absolute，则它会相对于文档流中的父元素进行定位。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    #parent {
      position: relative;
      border: 1px solid black;
      width: 300px;
      height: 200px;
    }

    #child {
      position: absolute;
      top: 50px;
      left: 50px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div id="parent">
    <div id="child">
      This is the child element.
    </div>
  </div>
</body>
</html>

在上面的代码中，父元素的position被设置为relative，而子元素的position被设置为absolute。父元素仍然在文档流中占据位置，但是子元素相对于父元素进行定位，距离父元素的顶部和左边各50像素。