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

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



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

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

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

その解決法として、

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

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

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

注意
Bootstrap使用をベースにしています。

ポイント

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

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

今日はここまで

関連する記事



こちらはいかが?


コメントを残す