LoginSignup
0

posted at

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

概要

タイトルそのままです。

.parent {
  container-type: inline-size
}
.child {
  position: fixed;
}
<div class="parent">
  <div class="child">子要素</div>
  <div>
    <div class="child">孫要素</div>
  </div>
</div>

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

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

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0