SYNCROBOTIC

FOUNDATIONS > Z-index

Z-index

空間階層定義了組件如何在介面的垂直維度中生存，確保每一個物件在 Z 軸上的位置都有跡可循，透過精確的數值分配，消除了視覺上的衝突，並為使用者構建出可預測的互動行為與極致清晰的視覺結構。

視覺堆疊順序

從最底層到最上層的通知，每一個平面在垂直空間中都擁有其專屬的預留位置。

  • 覆蓋層 (Toast/Modal)
  • 工具層 (Sticky/Dropdown)
  • 基礎層 (Base)
STICKY
DROPDOWNS
MODAL
TOAST

Z-index Scale 變數規範

TokenValueRecommended Usage
z-index-base
0系統的基礎起始點，所有非懸浮物件的預設層級。ex.頁面背景、內容區塊、靜態元素。
z-index-dropdown
1000脫離當前容器，但不遮蔽全域導航。ex.下拉選單、氣泡提示 (Tooltips)、上下文選單。
z-index-sticky
1100始終鎖定於視窗特定位置，作為操作基標。ex.固定標題列 (Navbar)、側邊導航欄、表格標頭。
z-index-modal
2000強制中斷當前任務，要求使用者立即處理。ex.系統對話框、全屏覆蓋層、圖片燈箱。
z-index-toast
3000系統最高位階，不受任何操作或彈窗遮蔽。ex.全域成功/錯誤通知、緊急系統警告。