opacityはz-indexが効かない

 CSSプロパティのopacityは透過度を0から1までの数値でデザインできる.今回,opacityはオブジェクトの重なりに有効なのか調べるため,z-indexを使って重なりを作り,opacityとz-indexの関係をまとめた.

See the Pen qoJgxL by dgbjdjg (@dgbjdjg) on CodePen.dark


 それぞれpタグのテキストがz-indexで黄色の領域と重なっている.しかし,pタグのテキストはz-indexにかかわらずopacityのみによって透過させられている.つまり,opacityはz-indexによる重なりを無効として,opacityを定めた領域を確実に透過させるのだ.
 opacityで透過の重なりを表現してみたいのだが,そううまくいかないようだ.