子绝父相
在 CSS 中，“子绝父相”是一种常用的定位技巧，指的是在父元素设置相对定位（position: relative），而子元素设置绝对定位（position: absolute）以相对于父元素进行定位。
笔记内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子绝父相</title>
<style>
/* 不一定是子绝父相，子绝父绝有时候也可以，只是子绝父相用的多一点 */
/* 在父元素的样式中设置 position: relative;，这样子元素就可以相对于父元素进行定位 */
.parent {
position: relative;
}
/* 在子元素的样式中设置 position: absolute;，并通过 top、bottom、left、right 等属性来控制子元素在父元素内的位置。 */
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 利用 2D 变形，使子元素的 x 和 y 轴移动自己宽高的50%，达到水平居中的效果 */
}
</style>
</head>
<body>
</body>
</html>
