position: fixed と top、left を設定しているのに、なぜかブラウザ基準の位置になってくれない問題に遭遇したのでメモ。
原因としては、親要素に transform を設定していると小要素の position: fixed がブラウザ基準にならない仕様のためだったようです。
“レイアウトがCSSボックスモデルによって管理されている要素の場合、transformプロパティにnone以外の値を指定すると、その要素はすべての子孫に対して包含ブロックを確立します。そのパディングボックスは、すべての絶対位置の子孫、固定位置の子孫、および子孫の固定背景の添付ファイルのレイアウトに使用されます。”
※Google翻訳ママなのでちょっとアレですが...
今回の場合は演出のために親要素にアニメーションをつけていたのが問題だったようです。
コメントする