“我試圖理解CSS在一些項目需求中的位置，但是遇到了一個場景，對于這個場景，我找不到任何關于瀏覽器為什么以特定方式運行的解釋。我在React應用程序中遇到了這個問題，但同樣的問題也發生在純HTML中。

下面是問題的偽代碼。我有4級HTML元素。

<parent-container>
  <buffer-container>
    <row-container>
      <row 1 />
      <row 2 />
      <row 3 />
      ....
      <row n />
    </row-container>
  </buffer-container>
</parent-container>

父容器的高度為400px，并定義了溢出。 緩沖容器的相對位置和高度為2000像素。 row-container沒有高度，所以它基于其子容器獲取高度。但是它是絕對定位的，頂部給定為0表示緩沖容器和行容器的頂部對齊。

現在，當我稍微滾動一下，假設第10行可見，我轉到devtools Elements選項卡，刪除第1行。手動刪除只是模擬以編程方式刪除行元素。注意到滾動條跳了一下。父容器的scrollTop CSS值被更改。

即使我從絕對定位的行容器中刪除行，我也不明白為什么刪除會導致父容器上的scrollTop發生變化。

我準備了一個代碼沙箱來復制這個場景。 https://code sandbox . io/s/jump-scroll-with-absolute-child-hhg5rg？file=/index.html

我試著瀏覽Stackoverflow上的CSS問題和圍繞CSS定位的文章，但沒有得到正確的解釋