CSS 相对扩展配合绝对定位

在本文中，我们将介绍使用CSS中的绝对定位相对于作为相对定位的父元素的方法。通过这种方法，我们可以轻松地在网页布局中创建复杂的相对于父元素定位的元素。

在CSS中，绝对定位（Absolute Positioning）是一种重要的布局技术，它允许我们将元素精确地放置在页面上的指定位置。与之相对的相对定位（Relative Positioning）则是指相对于自身所在的正常文档流中的位置进行定位。而我们今天要介绍的,是相对扩展（Relative Expansion）方法，即通过设置父元素相对定位，再为子元素设置绝对定位来实现相对于父元素的位置定位。

阅读更多：CSS 教程

设置父元素相对定位

要让子元素相对于父元素进行定位，在CSS中我们首先需要给父元素设置相对定位（position: relative）。相对定位可以轻松地将父元素作为子元素的坐标系原点。

例如，我们有一个简单的HTML结构如下：

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

通过给父元素添加.relative类，我们可以在CSS中这样设置相对定位：

.parent {
  position: relative;
}

现在，我们已经为父元素添加了相对定位，接下来我们将为子元素设置绝对定位。

子元素绝对定位

在CSS中，绝对定位的元素是根据最近的已定位祖先元素进行定位的。通过将子元素设为绝对定位，我们可以使用top、right、bottom和left属性来指定子元素相对于父元素的位置。

下面是一个示例，子元素相对于父元素的右下角进行定位：

.parent {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

.child {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}

在上述示例中，我们为父元素设置了相对定位，并给其指定了宽度、高度和边框。然后，我们为子元素设置了绝对定位，并使用right和bottom属性将其定位到了父元素的右下角。

通过这种方式，我们可以使用CSS的相对定位与绝对定位相结合的方法，灵活地控制网页布局中各个元素的位置。