More than 1 year has passed since last update.

container-type: inline-sizeを親に指定したら子や孫要素でposition: fixedが使えない

Posted at 2023-05-17

概要

タイトルそのままです。

.parent {
  container-type: inline-size
}
.child {
  position: fixed;
}

<div class="parent">
  <div class="child">子要素</div>
  <div>
    <div class="child">孫要素</div>
  </div>
</div>

階層は関係なく、子要素も孫要素もfixedの配置になりません。
absoluteを指定した時と同じように配置されるようです。

原因の特定に気づくのに時間がかかったので共有です。
仕様っぽいですね。