LESSON-11 · 用 Position 控制元素參考點、捲動行為與前後層級

讓定位關係可以被看見

本頁用服務卡、長內容、固定入口與重疊卡片，觀察元素相對誰定位，以及如何留下畫面與 DevTools 證據。

normal flow 與 relative

第一張卡片：static 的 normal flow。

第二張卡片：Starter 請讓它使用 relative。

第三張卡片：觀察它是否保留原本位置。

推薦方案的 badge 應貼在這張卡片右上角，不應把其他內容往下推。

這張卡片留在 normal flow，方便和推薦卡比較。

內容刻意保留足夠高度，讓 sticky header 的前後狀態可以觀察。

在這裡按 Tab 也能確認 header、連結與固定入口的操作順序。

固定元素不會自動替內容讓出空間，所以頁面底部需要安全距離。

把 viewport 切換到 390px，再檢查長文字、按鈕與卡片是否仍可讀。

將瀏覽器文字放大到 200%，確認內容沒有依賴固定高度或水平捲軸。

這些段落讓 sticky、fixed 與 overflow 的差異有實際畫面證據。

後層卡片：z-index 1

前層卡片：z-index 2

請只用 Tab 走過導覽、卡片連結、固定 CTA 與下面的按鈕。