2

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

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

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

没有will-change:transform样式的.child元素，无论父元素的位置如何，overflow:hidden都将基于窗口定位。
现在.parent具有这种风格，不仅top和left计算.childfrom .parent，而且也overflow:hidden适用于.child。如果我们在这里添加看一下
，似乎position:fixed将被完全忽略： https ://jsbin.com/beluweroti/1/edit?html,css,outputwill-change:transform

注意：我没有将此样式添加到.parent，所以我不能简单地删除它。

我可以处理定位，并设置正确的leftand top，但问题是
我如何才能忽略overflow:hidden固定位置的孩子？

4

1 回答 1

1

从规范：

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

所以基本上你面临的问题是变换而不是改变，因为：

对于布局由 CSS 框模型控制的元素，transform 属性的任何值（除了 none 之外）也会导致元素为所有后代建立一个包含块。它的填充框将用于布局其所有绝对位置后代、固定位置后代和后代固定背景附件。参考

所以 transform 正在为固定位置元素创建一个包含块，并且will-change应该做同样的事情，因为.parent现在是固定元素的包含块，它也会对其应用溢出。

基本上，如果您无法删除该will-change属性或更改其值，则您无能为力.parent

于 2018-12-08T08:24:02.057 回答