position:absoluteでtransformが効く理由を知りたい

Question

span要素はインライン要素に該当しますが、position:absoluteを指定するとまるでブロック要素のような動きをし始めます。

<div class="rel">
  <span class="abs"></span>
</div>

<style>
  .rel {
    position: relative;
  }

  .abs {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    background-color: magenta;
    transform: rotate(100deg);
  }
</style>

インライン要素にdisplay:blockやdisplay:inline-blockなどを指定せずともposition:absoluteでtransformやwidth、heightが効く理由が分からなくなりました。

あまり気にすることでもないかと思ったのですが、ちょっとむず痒いのでどなたかご教示いただけますでしょうか。

Answer 1

MDNでは、注釈としてtransformが適用可能な条件が明記されています。

変形可能な要素のみが transform の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、非置換インラインボックス、表の列ボックス、表の列グループボックスを除くすべての要素です。

ふつうの<span>はこのうちの「非置換インラインボックス」にあたりますが、position: absoluteで絶対配置したものはインライン要素ではなくなります。

Comments

[退会済みユーザー]

ご回答ありがとうございます！！
深くまで理解せず仕事していたので、とても勉強になりました。
あらためて自分で調べて理解度を深めていきたいと思います！！