为什么将转换添加到固定的父级会更改子级宽度？

Question

我在固定父div内有一个固定子div。当我将子级宽度设置为100％时，如果我添加了transform，则将其设置为窗口的100％宽度或父级宽度的100％：转换为父级div。

父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％。这是怎么回事？

1. http://codepen.io/kokojr/pen/wWvbrz
2. http://codepen.io/kokojr/pen/KMKLQX

更新：

1. 好的，起初我没有注意到，但实际上不仅仅是宽度改变了，位置也变得相对了。

2. 对于任何想知道的人，这也是可行的。如果添加#inner-inner具有固定位置的div，它将定位为rel。到#outer，除非你添加一个变换，#inner以及。这样#inner便成为固定儿童的背景。让我想起了这篇非常有趣的文章：https : //philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 1

从CSS 2.1-“包含块”的定义和CSS位置3-包含块的定义，

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

但是，当您将转换添加到某些祖先时，这种情况会改变。从CSS转换1-转换渲染模型，

对于其布局由CSS盒模型控制的元素，除了none转换之外的任何其他值都会导致创建堆栈上下文和包含块。该对象充当固定位置后代的包含块。