Inspect the working example
The 240×120 panel is position:relative. The note is absolute with top 10 and right 10. The panel therefore establishes the containing block used by these offsets.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Top reference | note.top−panel.top | 10px |
| Right reference | panel.right−note.right | 10px |
| Ancestor | Inspect panel position | relative establishes the local containing block |
Follow the browser mechanism
Absolute positioning uses a qualifying containing-block ancestor. relative can establish that reference without removing the panel from normal flow. The note wraps and has a minimum rather than a fixed height so enlarged text remains readable.
Without the positioned ancestor the reference changes
The alternative removes position:relative from the panel. No other qualifying ancestor exists in this isolated source.
<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">Note</p></section>The note uses the initial containing block, not the 240px panel; its right edge follows the viewport.
Try the repair
Does making the note absolute establish a local reference on its unpositioned parent automatically?
Show the worked answer
No. Check the qualifying ancestor. In this example, retain position:relative on the panel to establish that reference.
- Measure offsets relative to the intended panel.
- Test the missing-ancestor contrast at more than one width.