“子绝父相” 是 CSS 中实现元素精确定位的核心布局技巧，核心逻辑是：父元素设置相对定位（position: relative），子元素设置绝对定位（position: absolute），使子元素的定位基准从浏览器窗口变为父元素。
一、核心原理
- 1、父元素：position: relative
- 不脱离文档流，仅作为子元素的 “定位容器”。
- 自身位置不变，但会 “包裹” 所有绝对定位的子元素。
- 2、子元素：position: absolute
- 脱离文档流，不再占据页面空间。
- 定位属性（top/right/bottom/left）的基准从默认的 “浏览器窗口” 变为 “已定位的父元素”。
二、关键注意点
- 若父元素未设置 position: relative，子元素的绝对定位会向上寻找最近的 “已定位祖先元素”（如 relative/absolute/fixed），若无则以浏览器窗口为基准。
- 子元素的定位属性（如 top: 0; right: 0）需配合使用，否则可能因默认位置导致布局偏差。
三、实战实例
以下实例实现 “图片 + 右上角标签” 的常见布局，标签始终固定在图片右上角。
1. HTML 结构
2. CSS 样式
3. 效果说明
- 图片（父容器）正常占据页面空间，标签（子元素）脱离文档流，悬浮在图片右上角。
- 无论页面如何缩放，标签始终相对于图片保持 top: 10px; right: 10px 的位置。
四、常见应用场景
- 商品图片右上角的 “折扣”“新品” 标签。
- 卡片布局中的 “关闭按钮”“操作图标”。
- 表单输入框内的 “提示文字”“计数图标”。