为容器添加contain:content后fixed定位失效是Bug还是规范？

问题场景 #

原本按钮通过position: fixed固定在视口右下角，给父容器.container添加contain: content;后，fixed定位的表现异常，仿佛被禁用。

代码示例 #

HTML代码 #

<div class="container">
  <section>section</section>
  <footer>
    <span>footer</span>
    <button>top</button>
  </footer>
</div>

CSS代码 #

section {
  height: 90vh;
  background: green;
  margin: 10px 0;
  color: white;
}

footer {
  height: 100px;
  background: blue;
  color: white;
}

footer button {
  background: red;
  color: white;
  padding: 10px;
  width: 100px;
  height: 100px;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 100000;
}

/* 新增的性能优化样式 */
.container {
  contain: content;
}

原因解析 #

这不是Bug，是CSS规范的明确要求。

当给元素设置contain: content时，该元素会成为其内部fixed定位元素的包含块。原本fixed定位的元素是以视口作为包含块，会固定在视口的某个位置；但添加contain: content后，.container变成了按钮的包含块，按钮的定位会相对于.container计算，不再跟随视口滚动，看起来就像fixed失效了。

contain: content包含了layout、paint和style三种包含类型，其中layout包含会改变定位元素的包含块规则——让该元素成为内部fixed元素的包含块，这是为了实现容器内部的渲染隔离，在提升性能的同时，也限制了fixed元素的定位范围。

可选解决思路 #

如果既要保留contain: content的性能优化，又要让按钮保持视口固定，可以把按钮移出.container容器，放在容器外部，这样它的包含块就还是视口，不受.container的contain属性影响。

内容的提问来源于stack exchange，提问作者RyoKimura