Overflow

12. overflow と z-index

overflowははみ出したコンテンツの制御、z-indexは要素の重なり順序を制御します。
どちらもレイアウトの微調整に欠かせないプロパティです。

🎮 overflow プレイグラウンド
はみ出すコンテンツ

このテキストは長いので、コンテナからはみ出す可能性があります。 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Duis aute irure dolor in reprehenderit in voluptate velit esse. Excepteur sint occaecat cupidatat non proident, sunt in culpa.

さらにテキストは続きます...まだまだたくさんのコンテンツ。 
.container {
  overflow: visible;
}

z-index プレイグラウンド

スライダーで各ボックスの z-index を調整し、重なり順を確認してください。

🎮 z-index 比較
1
2
3
z-index: 1
z-index: 2
z-index: 3 
.red   { z-index: 1; }
.blue  { z-index: 2; }
.green { z-index: 3; }

📌 覚えておきたいポイント

  • overflow: hidden はスクロールバーなしではみ出しを隠す
  • overflow: auto は必要な時だけスクロールバーを表示
  • z-index は position が static 以外でないと効かない
  • 同じ親内の兄弟要素同士で z-index が比較される（スタッキングコンテキスト）
  • z-index: auto は親の値を継承しない
  • 負の z-index は背景の後ろに配置可能