为什么将变换添加到固定的父对象会更改子对象宽度

Question

我在固定的父div中有一个固定的子div。当我将子宽度设置为100%时，它要么设置为窗口的100%宽度，要么设置为父宽度的100%，如果我添加transform:translate到父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-innerdiv，它将相对于#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之外堆叠上下文和包含块。该对象充当包含用于固定定位的子体的块。