position: fixed がブラウザ基準にならない

| コメント(0)
position: fixed と top、left を設定しているのに、なぜかブラウザ基準の位置になってくれない問題に遭遇したのでメモ。

原因としては、親要素に transform を設定していると小要素の position: fixed がブラウザ基準にならない仕様のためだったようです。


“レイアウトがCSSボックスモデルによって管理されている要素の場合、transformプロパティにnone以外の値を指定すると、その要素はすべての子孫に対して包含ブロックを確立します。そのパディングボックスは、すべての絶対位置の子孫、固定位置の子孫、および子孫の固定背景の添付ファイルのレイアウトに使用されます。”

※Google翻訳ママなのでちょっとアレですが...


今回の場合は演出のために親要素にアニメーションをつけていたのが問題だったようです。

コメントする

このブログ記事について

このページは、gravity-worksが2019年4月17日 10:41に書いたブログ記事です。

ひとつ前のブログ記事は「今後使える(予定)の短いclearfix」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。