CSS 與 RWD 面試整理：Flexbox、Grid、定位與層疊脈絡

React 寫得熟，不代表 CSS 面試就能跳過。

許多前端職缺仍會直接考：

• Flexbox 和 Grid 怎麼選？
• z-index: 9999 為什麼還是被蓋住？
• position: absolute 是相對誰定位？
• RWD 怎麼規劃 breakpoint？
• 怎麼處理內容溢出和跨瀏覽器問題？

Flexbox 和 Grid 怎麼選？

Flexbox 偏向一維排列，一次主要處理 row 或 column。

適合：

• 導覽列
• 按鈕群組
• 垂直置中
• 元件內部排列

Grid 偏向二維版面，可以同時控制 rows 和 columns。

適合：

• Dashboard
• 商品卡片網格
• 複雜頁面版型
• 需要對齊欄與列的畫面

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
 
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

面試回答不要說 Grid 比 Flex 新所以比較好，兩者解決的維度不同，也常一起使用。

position absolute 相對誰？

position: absolute 會相對最近一個 position 不是 static 的 ancestor 定位。

.card {
  position: relative;
}
 
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

如果找不到 positioned ancestor，就會相對初始 containing block。

其他常見值：

• relative：保留原本空間，可作為 absolute containing block
• fixed：通常相對 viewport
• sticky：在指定 scroll container 和門檻內黏住

z-index 很大為什麼沒用？

因為 z-index 不是全站共用的一條數字線，它會受到 stacking context 影響。

可能建立 stacking context 的條件包括：

• positioned element 搭配 z-index
• opacity < 1
• transform
• filter
• isolation: isolate

子元素無法靠超大 z-index 跳出父層 stacking context。

遇到 modal 被蓋住，我會先用 DevTools 看 ancestor stacking context，而不是繼續把數字加大。React 專案也常用 Portal 把 modal render 到較高層 DOM。

盒模型

預設 content-box 的 width 不包含 padding 和 border。

* {
  box-sizing: border-box;
}

使用 border-box 後，設定的 width 會包含 content、padding、border，版面尺寸比較容易預測。

RWD 怎麼規劃？

我會採 mobile-first：先寫小螢幕的基本版，再用 min-width 增強大螢幕布局。

.layout {
  display: block;
}
 
@media (min-width: 768px) {
  .layout {
    display: grid;
    grid-template-columns: 240px 1fr;
  }
}

Breakpoint 不應只照特定裝置名稱，而是看內容在哪個寬度開始放不下。

也要考慮：

• 長文字與多語系
• 瀏覽器縮放
• 虛擬鍵盤
• safe area
• hover 不一定存在
• touch target 尺寸

Container Query 是什麼？

Media query 看 viewport；container query 看元件容器寬度。

.card-list {
  container-type: inline-size;
}
 
@container (min-width: 600px) {
  .card {
    grid-template-columns: 160px 1fr;
  }
}

它適合設計系統中的可重用元件，因為同一張 card 放在 sidebar 和主內容區時，可以依自己的容器調整，而不是依整個 viewport。

常見追問

如何讓文字不要撐爆容器？

依需求使用 overflow-wrap: anywhere、ellipsis、line clamp，並確認 flex child 是否需要 min-width: 0。

100vh 在手機有什麼問題？

行動瀏覽器網址列會伸縮，傳統 100vh 可能和可視區域不同。可以依場景考慮 dvh、svh、lvh。

怎麼處理跨瀏覽器？

先確認需求支援範圍，使用標準 CSS、Autoprefixer、feature query 和真實裝置測試，不應盲目為所有舊瀏覽器加 hack。

面試回答模板

Flexbox 適合一維排列，Grid 適合同時控制 rows 和 columns。RWD 我會以 mobile-first 和內容斷點規劃，不只針對特定手機型號。遇到 z-index 問題會先檢查 stacking context；元件需要依自身空間調整時會考慮 container query。實作時也會測長文字、鍵盤操作、觸控尺寸和主要瀏覽器，而不是只讓設計稿尺寸看起來正確。