見出し画像

ぼくのかんがえた さいきょうのz-index

にしはら

最強のz-indexを考えました。多分これが一番上です。下記デモで、どんな要素よりもピンク色の四角が一番上になるはずです。

:root:after {
  content: '多分これが一番上だと思います。';
  display: block;
  width: 100px;
  height: 100px;
  position: fixed;
  top: 20px;
  left: 20px;
  background-color: pink;
  z-index: 2147483647;
}

z-indexによる重ね合わせについてはこちらの記事に詳しく書いています。

君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA

最強理論1：z-indexの最大値

ピンク色の要素には2147483647というz-indexの最大値が指定されています。これ以上の値は無視されます（同じ値扱い）。なので、単純なz-indexの数値対決では負けません。

最強理論2：ルート直下

何もしなくてもルート要素（HTML）にスタッキングコンテキストが自動的に発生します。そしてそれが一番の親（ルートスタック）になります。そのため、より上位のスタッキングコンテキストを作って上回る手法は使えません。

最強理論3：HTML順で一番最後

z-indexが同じ値の場合、要素の出現が後のものが上になります。ルート要素（今回は<html>）に対する疑似要素:afterで指定しているので、この要素があるのは</html>の直前（</body>よりも後！）です。順番においてもこれ以上後ろには要素は出現しません。

これら3つ最強理論によって他の要素よりも常に上になる、さいきょうのz-indexになっている（はずです）。

もしこれを上回れる書き方があったら教えて下さい。

この記事が気に入ったらサポートをしてみませんか？