Question

对我来说，将变换应用于元素一直意味着盒子模型不会移动，并且元素只是在视觉上移动。

我想知道这对于溢出是如何工作的。如果元素的框模型没有被移动，那么浏览器如何知道该元素是否已突破其父框？

＆＃13;

.outer {
  width: 200px;
  height: 200px;
  background-color: blue;
  overflow: scroll;
}

.inner {
  width: 100px;
  height: 100px;
  transform: translateY(110%);
  background-color: red;
}

＆＃13;

<div class='outer'>
  <div class='inner'>
  </div>
</div>

＆＃13;

Answer 1

你是正确的，因为变换不会影响框布局，但是the spec makes an exception for overflow：

对于布局由CSS框模型控制的元素，transform属性不会影响转换元素周围内容的流动。但是，溢出区域的范围考虑了转换后的元素。此行为类似于元素通过相对定位偏移时发生的情况。因此，如果'overflow'属性的值为'scroll'或'auto'，则会根据需要显示滚动条，以查看在可见区域外转换的内容。

如果盒子模型没有受到影响，为什么在翻译元素时会发生溢出？

1 个答案: