凍結 Header - daniel-qa/Vue GitHub Wiki

ex:

使用 fixed，overflow-y:hidden

&.fixed-space-box {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  overflow-y: hidden;
  z-index: 10;
}

overflow-y: hidden; → 垂直方向超出的內容全部隱藏，不允許滾動。

→ 這是關鍵：如果右側欄內容比 100vh 還高，就會被截掉，完全不能滾。

top: 0 - 固定在視窗頂部

right: 0 - 固定在視窗右側

---

• ex

.fixed-space-box {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  z-index: 10 !important; /* 確保在其他元素上方 */
}

!important 會強制該 CSS 屬性擁有最高優先級，無視正常的 CSS 優先級規則。

---

凍結 Header

<div class="auth-tab-wrap sticky-header">

• css 設定

/* 基础 sticky 设置 */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--bg-color, #fff);
}

• 註解版

/* 基础 sticky 设置 */
.sticky-header {
  /* 粘性定位：滚动时元素会"粘"在指定位置 */
  position: sticky;
  
  /* 距离容器顶部 0px 的位置开始粘性定位 */
  top: 0;
  
  /* 层级索引：确保元素显示在其他元素之上 */
  z-index: 1000;
  
  /* 背景色：使用CSS变量，fallback为白色 */
  /* var(--bg-color, #fff) = 优先使用--bg-color变量，如果未定义则使用#fff */
  background-color: var(--bg-color, #fff);
}

• Position 的選項

fixed ✅（最霸道）

特性：定位基準幾乎永遠是 viewport（瀏覽器視窗），不隨著頁面內容滾動。

效果：滾動再多，它都穩穩地浮在視窗上。

比喻：像是把東西釘死在你眼球上，不管捲到哪裡都在那。

如果沒設 z-index，它可能還是被其他元素（有 stacking context 的）蓋掉。

static / relative → 腳踩地面，乖乖排隊。

absolute / fixed → 脫離地面，漂浮起來，但高低要看 z-index。

sticky → 原本在地面，但有條件時會黏在牆上。

Position	值是否在文檔流	z-index 是否生效	定位參考	使用場景
static	✅ 在文檔流中	❌ 無效	-	預設狀態
relative	✅ 在文檔流中	✅ 有效	自身原位置	最常用，不影響佈局
absolute	❌ 脫離文檔流	✅ 有效	最近的定位祖先	精確定位
fixed	❌ 脫離文檔流	✅ 有效	視窗	固定位置
sticky	部分脫離	✅ 有效	視窗	黏性定位