みかづきブログ その3

3ヶ月つづけてみました。

Chromeでposition: fixedの要素のz-indexがおかしくなる時があるような気がする

DOMをバリバリ動かすサイトをつくっていたとき、z-indexがある一定の値を超えると表示されなくなるという現象に悩まされました。

.tohoho {
    position: fixed;
    z-index: 60;
}

だと表示されるのに、

.tohoho {
    position: fixed;
    z-index: 61;
}

だと表示されない的な感じです。

該当の現象だけを切り出すことができず原因はわからなかったのですが、position: fixed の要素でしか起こらないので、条件のひとつなのかもしれません。



いろいろ試した結果、

.tohoho {
    position: fixed;
    z-index: 61;
    -webkit-transform: translate3d(0,0,0);
}

と、translate3dを設定したら表示されるようになりました。
不思議です。