2019年4月アーカイブ

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

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


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

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


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

このアーカイブについて

このページには、2019年4月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2019年1月です。

次のアーカイブは2020年11月です。

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