サイズ不明要素のposition:absolute;で親要素の角への配置方法

position:absolute;を用いて親要素の中央や角に位置指定する場合、子要素の「サイズ（幅、高さ）」がわかっていれば問題はありません。

一方、子要素のサイズが可変で固定値を指定することが難しい場合はtransform: translate(***, ***)を使うことが多いようです。

しかし、transformを使用すると、画像やテキストが滲む（レンダリングがおかしくなる）問題が発生します。

その解決法として、

-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased;

と指定する方法が紹介されていますが、効果が出ない場合もあるようです。

そこで、transformを使用しない方法を改めて考えてみました。

コード

兎にも角にもまずは下のコードサンプルをご確認ください。

親要素に対して上下左右中心の各ポイントに子要素が揃って表示されています。

コード解説

• 親要素と子要素をwidth:100%; height:100%;で同じサイズにする
• 子要素の位置をtop/right/bottom/leftの-100%/-50%で位置を調整する
• 子要素の中をdisplay:flex;とjustify-content/align-itemsのstart/end/centerで子要素の内容の位置を調整する
• absoluteが重なって下の親要素がクリック無効になるので子要素にpointer-events:none;を追加

これで親要素のサイズがわからなくても、比較的自由な位置に配置することが出来るようになりました。

サイズ不明要素のposition:absolute;で親要素の角への配置方法