もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

縦横軸の同時実装は、設計上はもともと可能だったにもかかわらず、各ブラウザで挙動が安定せずに未実装だったように理解されていますが、ようやくモダンブラウザで安定してサポートされるようになりました。大きなテーブルレイアウトなどを破綻なくきれいに見せる実践的なコードですので、ぜひ導入してみてください。ここでは、実際のコードを含めつつ、解説します。

position: stickyの縦横軸の同時実装デモを見る

position: stickyって何ができるのか

まずはposition: stickyの解説ですが、以前にこちらで説明していますので、ご覧ください。

設計上、position: sticky は複数方向に対して同時に指定できています。

.element {
  position: sticky;
  top: 0;
  left: 0;
}

これで、縦スクロール時 に 上部に張り付き、横スクロール時 → 左端に張り付くという“二軸 sticky”が実現できます。

なぜ「最近できるようになった」と感じるの

以前は 特に left / right の横方向 sticky が不安定で、Safari / 古いChrome / Edgeで大きく挙動差ありました。それに、overflowや親要素の影響で動かないケースが多く「縦だけ使うもの」という認識が広まっていましたが、現在の状況は、モダンブラウザ（Chrome / Safari / Firefox / Edge）でtop + left の併用も問題なく動作しています。ブラウザーの実装が完了して、テーブル固定ヘッダー＋左カラムなどが実装しやすくなっています。

よくある実装例

スクロールテーブルの左上セル固定

“`css
th {
position: sticky;
top: 0;
}

td:first-child,
th:first-child {
position: sticky;
left: 0;
}

ここの注意点

ここがハマりどころですが、親要素に overflow: hidden/auto があると効かないことがあります。またz-index を適切に設定しないと重なりが崩れることが多々あります。stickyは「直近のスクロールコンテナ」を基準にすることを意識して実装してください。

まとめ

縦横軸の同時実装は、新機能ではなく “実用レベルに成熟した”のが最近。* 現在は 縦＋横の複合stickyを前提に設計してOKな時代ですので、こちらのデモを確認しつつ実装してください。これで大きなテーブルレイアウトのレスポシブルも柔軟に対処できます。

z-indexの設計思想

このレイヤー構造が崩れると重なりのバグが出ます

崩れないための重要なポイント

① border-collapse: separate

collapseだとstickyが破綻するケース多いので気をつけてください。

② 背景色を必ず指定してください。透明だと下のセルが透けて被ってしまいます。

background: #fff;

③ overflowの管理

.table-wrap {
  overflow: auto;
}

スクロールコンテナは1つに限定して継承の問題などクリアにしてください。

④ z-indexは「段階的に」指定しましょう。

適当に999など指定していまうと、レイヤー設計が破綻してしまいます。

⑤ 幅を固定するとさらに安定

表示幅を明示すると挙動が安定します。レスポンシブにおいては重要なポイントです。

th, td {
  min-width: 120px;
}

よくあるバグと原因