CSS定位——子绝父相的原理（相对定位和绝对定位）
子绝父相，意味着子元素将相对于最近的已定位（即非 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 将相对于初始的包含块进行定位。
评论已关闭