CSS visibility 屬性

visibility 屬性用來控制元素是否可見。和 display: none 不同，使用 visibility: hidden 隱藏的元素仍然會佔據空間。

visibility 值

visible（預設值）

元素正常顯示。

.box {
  visibility: visible;
}

hidden

元素隱藏，但仍然佔據原本的空間。

.box {
  visibility: hidden;
}

collapse

用於表格元素（<tr>、<td>、<col> 等），會隱藏該行或列且不佔空間。對於其他元素，效果和 hidden 相同。

tr.hidden-row {
  visibility: collapse;
}

visibility: hidden vs display: none

這兩種隱藏方式有重要的差別：

<div class="box">Box 1</div>
<div class="box hidden">Box 2 (hidden)</div>
<div class="box">Box 3</div>

visibility: hidden

.hidden {
  visibility: hidden;
}

• 元素不可見
• 元素仍然佔據空間
• Box 1 和 Box 3 之間會有空隙

display: none

.hidden {
  display: none;
}

• 元素不可見
• 元素不佔空間，就像不存在一樣
• Box 1 和 Box 3 會相鄰

比較表

子元素的行為

visibility 可以被子元素覆蓋，但 display: none 不行：

<div class="parent">
  <div class="child">Child</div>
</div>

/* visibility 可以被子元素覆蓋 */
.parent {
  visibility: hidden;
}
.child {
  visibility: visible;  /* 子元素會顯示 */
}

/* display: none 的子元素無法顯示 */
.parent {
  display: none;
}
.child {
  display: block;  /* 仍然不會顯示 */
}

使用時機

使用 visibility: hidden

• 需要保留元素的空間
• 製作淡入淡出動畫（搭配 opacity）
• 需要讓子元素可以單獨顯示

/* 淡出效果 */
.fade-out {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

.fade-in {
  visibility: visible;
  opacity: 1;
}

使用 display: none

• 完全移除元素，不佔空間
• 響應式設計中隱藏元素
• 切換顯示不同的內容區塊

/* 響應式隱藏 */
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

其他隱藏元素的方式

除了 visibility 和 display，還有其他方式可以隱藏元素：

opacity: 0

元素完全透明，但仍可互動（點擊、hover 等）。

.transparent {
  opacity: 0;
}

移出畫面

將元素移到畫面之外。

.off-screen {
  position: absolute;
  left: -9999px;
}

clip-path

用裁切的方式隱藏。

.clipped {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

各種隱藏方式比較