【可変に対応】絶対にズレないabsolute

実現したいのはいつでも要素の左上にあって、親要素に少しだけかぶっており右にずれている要素です。

absoluteで位置を指定すればいい！と思いますが、テキストが増えると…このように崩れてしまいます。

今回は、親要素のサイズが変わってもズレないabsolute要素の設定方法を紹介します。

CSSの解説

今回のポイントは transform: translate(20px,-20px);です。

ふだんabsoluteを使って要素の位置を指定するときは以下のように指定すると思います。
ちょっと上にあって、左にずれたデザインはtopとleftで実現できますね。

.box__inner--decoration{
  background-color: skyblue;
  color: #fff;
  padding: 10px 20px;
  border-radius: 100vw;
  position: absolute;
  top: -4%;
  left: 5%;
}

このままでも、親要素の中身が増えない・同じ幅であれば問題はありません。
しかし、親要素の中身が増えるとこのようにずれてしまいます…

ひとつずつCSSを書くのは大変なので、transform: translateを使って親要素が変わっても位置がズレないabsolute要素を実現しています。

.box__inner--decoration{
 background-color: skyblue;
 color: #fff;
 padding: 10px 20px;
 border-radius: 100vw;
 position: absolute;
 top: 0;
 left: 0;
 transform: translate(20px,-20px);
}

使いどころ

WordPressで、カスタムフィールドを用いてabsolute要素の中にテキストを入れる場合に非常に役に立ちます。

中身にどれくらいの長さのテキストが入るかわからないときでも使えるので、transformを積極的に使っていきたいです。