跳至內容
Astera Technology

絕對定位的註記,要跟哪個容器對齊?

top、right 的偏移要有參考;用真正父層框位置看清楚。

註記在面板頂部下 10px,右邊亦向內 10px。

下載完整個案資料及參考答案 ↓

先看這個例子

240×120 面板設 position:relative,註記則 absolute、top10、right10;偏移以這個面板建立的包含區塊為準。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
頂部參考note.top−panel.top10px
右邊參考panel.right−note.right10px
上層查看面板 positionrelative 建立本地包含區塊
下載可編輯 CSV ↓

瀏覽器怎樣處理

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。

  • 偏移要相對原定面板量度。
  • 不同闊度也測缺父層參考的反例。

原始例子檔案

相關資源