为什么将变换添加到固定父项会更改子项宽度？答案

【问题标题】：Why adding transform to fixed parent changes child width?为什么将变换添加到固定父项会更改子项宽度？
【发布时间】：2016-09-28 19:20:24
【问题描述】：

我在固定的父 div 中有一个固定的子 div。当我将子宽度设置为 100% 时，它设置为窗口的 100% 宽度或如果我添加 transform: translate to parent div，则设置为父宽度的 100%。

父 div css：

#outer {
  position: fixed;
  top: 0;
  left: 50%;
  // transform: translate(-50%, 0);

  width: 400px;
  height: 200px;
  z-index: 5000;
  background-color: red;
}

子 div：

#inner {
  position: fixed;
  width: 100%;
  left: 30%;
  top: 20%;
  background-color: green;
}

现在#inner 是屏幕的 100% 宽度。取消注释转换线使其成为 100% 的父级。怎么回事？

更新：

好的，一开始我没有注意到，但实际上改变的不仅仅是宽度，位置也变得相对。
对于任何想知道的人来说，这也是可行的。如果您添加一个具有固定位置的#inner-inner div，它将定位自己。到 #outer 除非您也将转换添加到 #inner。它是#inner 然后成为固定子代的上下文。让我想起了这篇非常有趣的文章：https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

【问题讨论】：

似乎transform 创建了一个独特的堆叠上下文/环境，其中#inner “修复”绝对与转换后的父级相关。很有趣。
过去，我认为 CSS WG 解决了固定元素也应该为固定后代建立一个包含块。但他们似乎改变了主意。

标签： html css

【解决方案1】：

来自CSS 2.1 - Definition of "containing block" 和CSS Position 3 - Definition of containing block，

如果元素有position: fixed，则包含块是在连续媒体的情况下由viewport 建立或分页媒体情况下的页面区域。

但是，当您向某个祖先添加转换时，情况会发生变化。来自CSS Transforms 1 - The Transform Rendering Model，

对于布局受 CSS 框模型控制的元素，任何值除了 none 之外的转换结果会创建一个堆叠上下文和包含块。该对象充当包含固定定位后代的块。

【讨论】：