A
約 4 分鐘閱讀

用 CSS 隱藏網頁元素的六種方法 — 完整比較與無障礙考量

#CSS

想要隱藏頁面上的元素，有很多種方法可以選擇。不同的方法會有不同的特性，選擇哪一種取決於你的需求：元素是否要佔據空間？是否需要被螢幕閱讀器讀取？是否需要有動畫效果？

這篇文章整理了六種常見的 CSS 隱藏方法，並說明各自的適用場景和無障礙（Accessibility）考量。

1. display: none — 完全從文件流移除

.hidden {
  display: none;
}

這是最常見也最徹底的隱藏方式。

特性：

適用場景： 需要完全隱藏某個區塊，例如 Tab 切換時隱藏非當前的內容、手機版隱藏桌面版專用的元素。

2. visibility: hidden — 保留空間但視覺隱藏

.invisible {
  visibility: hidden;
}

讓元素「看不見」，但空間還在。

特性：

適用場景： 需要保留佈局空間的情況，例如等待載入時的佔位元素。

3. visibility: collapse — 表格／Flex 專用的收合

.collapsed {
  visibility: collapse;
}

這個屬性根據元素類型有不同的行為。

特性：

適用場景： 動態顯示/隱藏表格的列或欄；若想用於 Flex 項目的切換，記得先確認目標瀏覽器是否支援「不佔空間」的行為，否則建議當成 visibility: hidden 的等效寫法使用。

4. opacity: 0 — 完全透明

.transparent {
  opacity: 0;
}

讓元素完全透明。

特性：

適用場景： 需要動畫效果的顯示/隱藏，例如 hover 時的淡入效果、Toast 通知的淡出動畫。

注意： 如果不想讓透明元素被互動，需要搭配 pointer-events: none;：

.transparent-no-interaction {
  opacity: 0;
  pointer-events: none;
}

5. 移出可視範圍（position: absolute）

.offscreen {
  position: absolute;
  left: -9999px;
}

把元素移到螢幕外。

特性：

適用場景： 這是 無障礙友善 的隱藏方式，適合用於「只給螢幕閱讀器看」的內容，例如跳轉連結（Skip Link）、表單的輔助說明文字。

改良版寫法（更安全）：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

這是 Tailwind CSS（sr-only utility）目前使用的寫法；Bootstrap 5+ 稱為 .visually-hidden（Bootstrap 4 稱為 .sr-only），兩者現行版本都已改用 clip-path 而非較舊的 clip: rect(...)。

6. clip-path — 裁切成不可見

.clipped {
  clip-path: inset(50%);
}

使用 clip-path 裁切元素。

特性：

適用場景： 需要特殊裁切動畫效果時使用。

比較表格

方法 佔據空間 可點擊 螢幕閱讀器 可 Tab 聚焦 可動畫
display: none ❌ ❌ ❌ ❌ ❌
visibility: hidden ✅ ❌ ❌ ❌ ✅
visibility: collapse 看情況＊ ❌ ❌ ❌ ✅
opacity: 0 ✅ ✅ ✅ ✅ ✅
Position 移出螢幕 ❌ ❌ ✅ ✅ ❌
clip-path: inset(50%) ✅ ❌ ✅ ✅ ✅

＊visibility: collapse 是否「不佔空間」依元素類型與瀏覽器而異：table 列/欄一律不佔空間；Flex 項目僅 Firefox 完整支援，Chrome/Edge/Safari 大多仍佔據空間；Grid 子項目則一律等同 visibility: hidden，仍佔據空間（詳見上方第 3 節說明）。

無障礙（Accessibility）考量

選擇隱藏方式時，一定要考慮無障礙需求：

情境一：完全隱藏，所有人都看不到

使用 display: none 或 visibility: hidden。

情境二：視覺隱藏，但螢幕閱讀器可讀

使用 .sr-only 類別（Position 移出螢幕的改良版）。這在以下情況很常見：

<button>
  <svg><!-- 圖示 --></svg>
  <span class="sr-only">關閉選單</span>
</button>

情境三：需要動畫效果

使用 opacity 搭配 pointer-events 和 visibility：

.fade-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s,
    visibility 0.3s;
}

.fade-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

這樣可以有淡入淡出效果，又不會讓隱藏的元素被意外互動。

結語

隱藏元素看起來是很簡單的事，但背後有很多細節需要考慮。選擇正確的隱藏方式，可以讓網站有更好的使用者體驗，也能照顧到使用輔助科技的使用者。

下次要隱藏元素時，先想一想：

  1. 這個元素需要被螢幕閱讀器讀到嗎？
  2. 需要保留空間嗎？
  3. 需要動畫效果嗎？

根據這些問題，選擇最適合的隱藏方式。

站內相關文章：