opacityとz-index

2012-02-03に改悪されたロゴ

opacityプロパティーで1より下が指定された要素はその重なり順が変化するという仕様があるようだ。擬似要素を複数組み合わせて紙をずらして重ねたようにロゴをちょっと改悪した時に初めて知った。いつものChromeのバグかと思った……。

仕様ではpositionプロパティーがstatic以外の要素でopacityプロパティーを1より下にするとz-indexプロパティーが0であるとみなされるようになっている。そのためその要素でz-indexプロパティーを-1にして背面に移動するようにしたり、100等で意識的に手前に持ってきたりするようにしている場合、その重なり順が壊れてしまう。

と、こう書くと結構単純な感じなんだけど、実際には0とみなされた上で新たな重なり順が作られるので、いくつかの要素をまとめて半透明にして重ねまくってたりすると、どういう重なり順になるかとてもイメージしにくい。ので余程の理由がない限りはopacityz-indexプロパティーの組み合わせには近寄らない方が良さそう。

追記

例えば最初のスクリーンショットは件のopacityz-indexプロパティーを組み合わせて作ったもの。a要素とa::beforea::afterでそれぞれ正方形を作りTransformさせて重ねているだけ。

  1. a要素の文字(hail2u.net)
  2. z-index: -1a::before
  3. z-index: -2a::after
  4. a要素の背景

という重なり順になる。普通に-1等を使うとa要素の背景より後ろになるはずだがならない。かといって単純に上に重ねられるわけでもなく、背景と文字列の間に挟まっている。ややこしいですね!