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

作成日:
📝 はじめに 本記事はBootstrapの使用をベースにしています。

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

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

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

その解決法として、

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

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

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

コード

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

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

Position by CodePen

コード解説

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

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

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

物草 灸太郎
物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

コメントをどうぞ

※ メールアドレスが公開されることはありません。


上の計算式の答えを入力してください

string(0) ""