爲什麼翻譯元素時溢出發生，如果箱模型不受影響？

Question

將變換應用於元素，對我來說，總是意味着箱子模型不會移動，而且元素只是在視覺上移動。

我想知道這是如何工作溢出。如果元素的框模型尚未移動，那麼瀏覽器如何知道元素正在從其父框中分離出來？

.outer { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: blue; 
 
    overflow: scroll; 
 
} 
 

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

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

Answer 1

你處於一個轉換正確不影響盒佈局，但是the spec makes an exception for overflow：

對於其佈局由CSS框模型支配元素，變換屬性確實不會影響轉換元素周圍內容的流動。但是，溢出區域的範圍考慮了轉換的元素。這種行爲類似於元素通過相對定位偏移時發生的情況。因此，如果'overflow'屬性的值是'scroll'或'auto'，則會根據需要顯示滾動條，以查看在可見區域外部轉換的內容。