z-indexの悲惨さ：その親の背後にある子要素を表示する

ドキュメントオブジェクトモデル（DOM）ツリーで親の背後にある子要素を表示するという望ましい視覚効果を達成することは、困惑するタスクになります。 Z-Indexプロパティの広範な実装にもかかわらず、特に最新のブラウザでは、この問題に対処するための1つの信頼できるアプローチは、CSS3の変換3Dプロパティを活用することです。この手法は近年目立っており、この長年の課題の回避策を提供します。

。 背景：赤; 幅：100px; 高さ：100px; 変換スタイル：preserve-3d; 位置：相対; } 。子供 { 背景：青; 幅：100px; 高さ：100px; 位置：絶対; 上：-5px; 左：-5px; 変換：translatez（-10px）; }

.parent {
  background: red;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  position: relative;
}

.child {
  background: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -5px;
  left: -5px;
  transform: translateZ(-10px);
}

この手法により、子要素は親の背後に表示されながら親の重複を可能にし、望ましい視覚効果を提供します。それは、絶対的または固定された位置付けの必要性を排除し、あなたの動的要素の設計においてより大きな柔軟性を提供します。