Question

我在固定的父div中有一个固定的子div。当我将子宽度设置为100％时，如果我添加变换，则将其设置为窗口的100％宽度 OR 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％。发生了什么事？

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

更新：

好吧，起初我没有注意到，但实际上不仅宽度变化，位置也变得相对。
对于任何有奇迹的人来说，这也是有效的。如果你添加一个固定位置的#inner-inner div，它将定位自己的rel。除非您向#outer添加转换，否则转到#inner。它是#inner然后成为固定儿童的背景。让我想起这篇非常有趣的文章：https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 1

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

如果元素有from itertools import combinations df1_cols, df2_cols = zip(*combinations(df.columns,2)) df1 = pd.concat([df[col] for col in df1_cols],axis=1) df2 = pd.concat([df[col] for col in df2_cols],axis=1)，则包含块由viewport建立的连续媒体或分页媒体的页面区域。

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

对于布局由CSS框模型控制的元素，任何值除position: fixed以外的转换导致创建两个a 堆叠上下文和包含块。该对象充当包含固定位置后代的块。

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

1 个答案: