Question

我有一个父元素和一个子元素：

.parent {
  will-change: transform;
  overflow: hidden;
  position: absolute;
}

.child {
  position: fixed;
  top: 80px;
  left: 80px;
}

没有will-change:transform样式，.child元素与父项的位置无关，并且overflow:hidden将基于窗口定位。
现在.parent具有这种样式，不仅top的{{1}}和left从.child计算出来，而且.parent也适用于{{ 1}}。
如果我们添加overflow:hidden，看来.child将被完全忽略
在这里看看：https://jsbin.com/beluweroti/1/edit?html,css,output

注意：我没有将此样式添加到position:fixed中，所以不能简单地将其删除。

我可以处理定位问题，并设置正确的will-change:transform和.parent，但问题是
对于固定位置的孩子，我该如何忽略left？

Answer 1

来自the specification：

如果属性的任何非初始值都会导致元素为固定位置的元素生成包含块，则在will-change中指定该属性必须导致元素为以下元素生成包含块：固定位置的元素

所以基本上，您面对的是转换问题，而不是意志改变问题，因为：

对于其布局由CSS box模型控制的元素，transform属性的值除无外，还会导致该元素为所有后代建立一个包含块。其填充框将用于布局其所有绝对位置后代，固定位置后代和后代固定背景附件。^ref

因此，变换正在为固定位置元素创建一个包含块，并且will-change应该这样做，并且由于.parent现在是固定元素的包含块，因此它也会对其应用溢出。

基本上，如果您无法删除will-change属性或无法从.parent更改其值，则什么也不能做

保持溢出：意志改变后的隐藏行为：变换

1 个答案: