先看這個例子
240×120 面板設 position:relative,註記則 absolute、top10、right10;偏移以這個面板建立的包含區塊為準。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 頂部參考 | note.top−panel.top | 10px |
| 右邊參考 | panel.right−note.right | 10px |
| 上層 | 查看面板 position | relative 建立本地包含區塊 |
瀏覽器怎樣處理
Absolute 定位按符合條件的上層包含區塊計算。relative 可建立這個參考,而面板仍保留正常流位置。註記容許換行,高度用下限而非寫死,讓放大文字仍可讀。
父層不再定位,偏移參考就變了
反例移除面板的 position:relative。這份獨立原始碼沒有另一個符合條件的上層。
<style>body{margin:8px}</style>
<style>.panel{width:240px;height:120px;background:#e3efe8}.note{position:absolute;top:10px;right:10px;margin:0;width:40px;overflow-wrap:anywhere}</style><section class="panel"><p class="note">註記</p></section>註記改用初始包含區塊,不是 240px 面板;右邊跟視窗而定。
試着修正
只把註記設成 absolute,未定位的父層就會自動成為本地參考嗎?
查看參考答案
不會,須查符合條件的上層。本例要保留面板的 position:relative。
- 偏移要相對原定面板量度。
- 不同闊度也測缺父層參考的反例。