cssで親要素を基準に子要素をfixed、うーんそれってabsoluteでいいんじゃ？と思うけれどもとりあえずバグっぽい動きを見つけたので書いておきますね。

cssで親要素にtransformを使っていると子要素のfixedが親要素内に範囲が絞られちゃう、というものです。

 

バグが起こる条件

  1. 親要素に「transfrom」
  2. 子要素に「position: fixed」

 

これだけで親要素内しかその子要素が動き回れなくなります。なので子要素にbottom:0とかright:0とか指定しても親要素の右端、最下部に移動するだけ。画面の右はしっこ、一番下には来てくれなくなります。

意図せずに親要素基準になってしまってる感じ。

普段使いのブラウザがクロームなのでクロームでのみ一応発生を確認しています。

 

親要素に指定するtransformはrotateでもtranslateでもscaleでもなんでも大丈夫、…というか発生しちゃいます。scale(1)みたいな実質何もしない命令でも発生するので、意図的に親要素を基準に子要素をfixed、なんてこともやろうと思えばできちゃいます。

…でもそれってabsoluteでいいじゃん、と冒頭でも書いたけれど思うので個人的にはこれはテクニックというよりバグと思ってます。

 

まとめ

cssで親要素になんでもいいのでtransformのどれかを指定していると、子要素にfixedを指定してもその親要素基準、親要素の中しか動き回れなくなるバグ？のようなものを紹介しました。

また、子要素は動き回れなくなるだけじゃなくて、width:100%、height:100%とかも親要素基準になるのでぜんぜん画面いっぱいに広がってくれません。

完全にfixedじゃなくてabsoluteの振る舞いになっちゃう感じ。しょうがないから子要素を外に出すかー。