固定・スティッキー要素のz-index

固定・スティッキー要素のz-index

固定要素とスティッキー要素は、ビューポートとスクロール動作と相互作用するため、特別なz-indexの考慮が必要です。

固定要素

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed); /* 例：1030 */
}

スティッキー要素

.sticky-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky); /* 例：1020 */
}

よくある落とし穴：Transform内のFixed

/* 壊れる */
.page-wrapper {
  transform: translateX(0); /* スタッキングコンテキストを作成！ */
}

.header {
  position: fixed; /* ビューポートではなく.page-wrapperに対してfixedになる！ */
  z-index: 9999; /* 助けにならない */
}

修正戦略

/* 戦略1：祖先からtransformを削除 */
/* 戦略2：fixedの要素をtransformされた祖先の外に移動 */
/* 戦略3：可能な場合はfixedの代わりにstickyを使用 */

複数のスティッキー要素

.top-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.sub-nav {
  position: sticky;
  top: 48px; /* top-barの高さ */
  z-index: calc(var(--z-sticky) - 1);
}

固定/スティッキー要素の推奨z-index

:root {
  --z-sticky: 1020;
  --z-sticky-secondary: 1019;
  --z-fixed: 1030;
  --z-fixed-sidebar: 1029;
}