先看這個例子
第一個段落框是 100×30，畫面向右移 40px；正常流位置仍佔 100×30，下一段沿原本位置在下面開始。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 畫面移動 | 量度 left 減正常流偏移 | 40px |
| 下一行 x | 比較下一行與原流位置左邊 | 沒有跟住右移 40px |
| 下一行 y | 查看流位置高度 | 在第一段流高度後開始；基準字級時為 30px |
瀏覽器怎樣處理
Transform 改呈現座標，不重新分配正常流位置。getBoundingClientRect 包括變換，流偏移值則可查原本位置。用最小高度容許放大文字增高，因此放大後垂直距離要量度，不能照當 30px。
margin 會連流位置一起改
反例不用 transform，改成 margin-left40px。
<style>body{margin:8px}</style>
<style>.first,.next{width:100px;min-height:30px;margin:0}.first{margin-left:40px;background:#e3efe8}.next{background:#d9dce8}</style><p class="first">原始檔</p><p class="next">下一行</p>第一段的流偏移本身改了 40px；流位置與呈現位置之間沒有 transform 差值。
試着修正
哪個量度包括 40px transform：畫面外框還是原本流偏移？
查看參考答案
畫面外框包括變換；與流偏移比較，才分得出移動類型。
- 流偏移與變換後外框分開記。
- 容許文字增高，不裁在固定 30px 內。