我們可以把每個 HTML元素 想像成一張紙。

Example 1：

<div>1</div>

只有單一張紙。

Example 2：

<div>
    <div>2</div>
    <div>3</div>
</div>

一張紙上面的分別疊了兩張紙，其中一張在上半部分，另一張在下半部分。

Example 3：

<div>1</div>
<div>
    <div>2</div>
    <div>3</div>
</div>

現在，我們可以這樣解釋此結構：
最底下有兩張紙，第一張是單獨的，第二張紙上還疊著兩張紙。

在網頁上呈現的樣子：

1
2
3

Example 4：

讓我們修改結構順序。

<div>
    <div>2</div>
    <div>3</div>
</div>
<div>1</div>

在網頁上呈現的樣子：

2
3
1

此結構可解釋為：
最底下一樣有兩張紙，第一張紙上還疊著兩張紙，第二張則是單獨的。

這個結構除了順序交換以外，沒有其他的變化。因為我們移動的元素是最底下的紙，試想，一張紙上疊的其他紙張，在最底下那張移動時，疊在上方的紙張還是在原本重疊的位置，不會改變，放到 HTML元素 中也是相同的道理。