“子絕父相” 是 CSS 中實(shí)現(xiàn)元素精確定位的核心布局技巧，核心邏輯是：父元素設(shè)置相對(duì)定位（position: relative），子元素設(shè)置絕對(duì)定位（position: absolute），使子元素的定位基準(zhǔn)從瀏覽器窗口變?yōu)楦冈?/span>。
一、核心原理
- 1、父元素：position: relative
- 不脫離文檔流，僅作為子元素的 “定位容器”。
- 自身位置不變，但會(huì) “包裹” 所有絕對(duì)定位的子元素。
- 2、子元素：position: absolute
- 脫離文檔流，不再占據(jù)頁(yè)面空間。
- 定位屬性（top/right/bottom/left）的基準(zhǔn)從默認(rèn)的 “瀏覽器窗口” 變?yōu)?“已定位的父元素”。
二、關(guān)鍵注意點(diǎn)
- 若父元素未設(shè)置 position: relative，子元素的絕對(duì)定位會(huì)向上尋找最近的 “已定位祖先元素”（如 relative/absolute/fixed），若無(wú)則以瀏覽器窗口為基準(zhǔn)。
- 子元素的定位屬性（如 top: 0; right: 0）需配合使用，否則可能因默認(rèn)位置導(dǎo)致布局偏差。
三、實(shí)戰(zhàn)實(shí)例
以下實(shí)例實(shí)現(xiàn) “圖片 + 右上角標(biāo)簽” 的常見布局，標(biāo)簽始終固定在圖片右上角。
1. HTML 結(jié)構(gòu)
2. CSS 樣式
3. 效果說(shuō)明
- 圖片（父容器）正常占據(jù)頁(yè)面空間，標(biāo)簽（子元素）脫離文檔流，懸浮在圖片右上角。
- 無(wú)論頁(yè)面如何縮放，標(biāo)簽始終相對(duì)于圖片保持 top: 10px; right: 10px 的位置。
四、常見應(yīng)用場(chǎng)景
- 商品圖片右上角的 “折扣”“新品” 標(biāo)簽。
- 卡片布局中的 “關(guān)閉按鈕”“操作圖標(biāo)”。
- 表單輸入框內(nèi)的 “提示文字”“計(jì)數(shù)圖標(biāo)”。