CSS定位——子绝父相的原理（相对定位和绝对定位）

作者：System 时间：2024年08月17日分类：所有,html5 字数：699

这篇文章距离上次修改已过267天，其中的内容可能已经有所变动。

子绝父相，意味着子元素将相对于最近的已定位（即非 static 定位）的祖先元素进行定位。如果没有已定位的祖先元素，则子元素将相对于最初的包含块（即body元素）进行定位。

以下是一个简单的例子，演示了相对定位和绝对定位的使用：

HTML:

<div class="parent">
  <div class="child">我是子元素</div>
</div>

CSS:

.parent {
  position: relative; /* 设置为相对定位 */
  width: 300px;
  height: 200px;
  background-color: lightblue;
}

.child {
  position: absolute; /* 设置为绝对定位 */
  top: 20px;   /* 距离父元素顶部20px */
  left: 20px;  /* 距离父元素左侧20px */
  width: 100px;
  height: 100px;
  background-color: coral;
}

在这个例子中，.child 元素是 .parent 元素的子元素，并且它是绝对定位的。由于 .parent 是相对定位的，所以 .child 元素将相对于 .parent 进行定位，即距离 .parent 顶部和左侧各20px。如果没有 .parent 的相对定位，.child 将相对于初始的包含块进行定位。

CSS定位——子绝父相的原理（相对定位和绝对定位）

评论已关闭

推荐阅读