Solution · code-edit

logical inset

對照完整答案、責任邊界與原因。

Solution 要做什麼

對照完整答案、責任邊界與原因。

本主題檔案：files/style.css

定位：先讀 document/card 的 dir 與 writing-mode，再看 logical inset computed value。

頁面不會替你修改檔案；請在實作檔完成後重新整理確認。

卡片 position:relative；badge absolute，inline-end 從 0px 基準開始。

runtime inset-inline-end 由 0px 變16px；required facts 顯示 LTR 靠右、RTL 靠左。

.badge{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}

只在本階段資料夾內操作，避免改到其他章節。

index.html
入口頁：包含服務卡、長內容、重疊卡片、可聚焦控制項與定位任務。
style.css
定位樣式：集中觀察 normal flow、relative、absolute、sticky、fixed、z-index 與 focus-visible。

證據：現有 runtime before=0px、after=16px；required facts 包含 ltrOffset、rtlOffset