<div>標簽是HTML中常用的標簽之一，用于創建容器，并且可以用CSS來控制其樣式。其中，通過設置position屬性為"relative"，再配合left屬性可以實現左側定位。即使頁面發生滾動，div元素仍然會相對于其初始位置進行定位。接下來，我將通過幾個代碼案例來詳細說明<div>標簽的左側定位。
第一個案例中，我創建了一個簡單的HTML頁面，并使用CSS將<div>元素定位到左邊界距離頁面左側100px的位置。在CSS中，可以設置div的position屬性為"relative"，并使用left屬性為其指定相對于初始位置的左偏移值。具體的代碼如下所示：

<pre>html
<p><div style="position: relative; left: 100px;"></p>
<p>這是一個左側定位的div元素</p>
<p></div></p>

第二個案例中，我創建了一個包含多個<div>元素的布局，并將其中一個<div>元素設置為左側定位。為了使布局更加直觀，我還給每個<div>元素設置了一定的寬度和高度，并設置了不同的背景顏色。具體的代碼如下所示：

<pre>html
<p><div style="width: 300px; height: 200px; background-color: red;"></p>
<p>這是一個普通的div元素</p>
<p></div></p>
<br>
<p><div style="width: 300px; height: 200px; background-color: yellow;"></p>
<p>這是一個普通的div元素</p>
<p></div></p>
<br>
<p><div style="width: 200px; height: 200px; background-color: blue; position: relative; left: 100px;"></p>
<p>這是一個左側定位的div元素</p>
<p></div></p>

在第三個案例中，我創建了一個包含多個<div>元素的布局，并將其中一個<div>元素設置為左側定位，并且配合使用了z-index屬性來控制其在布局中的層級關系。具體的代碼如下所示：

<pre>html
<p><div style="width: 300px; height: 200px; background-color: red;"></p>
<p>這是一個普通的div元素</p>
<p></div></p>
<br>
<p><div style="width: 300px; height: 200px; background-color: yellow;"></p>
<p>這是一個普通的div元素</p>
<p></div></p>
<br>
<p><div style="width: 200px; height: 200px; background-color: blue; position: relative; left: 100px; z-index: 1;"></p>
<p>這是一個左側定位的div元素</p>
<p></div></p>
<br>
<p><div style="width: 300px; height: 200px; background-color: green; position: relative; left: -50px;z-index: 2;"></p>
<p>這是一個左側定位且具有較高層級的div元素</p>
<p></div></p>

通過以上的幾個代碼案例，我們可以清晰地看到<div>標簽的左側定位在HTML頁面布局中的應用。通過設置position為"relative"，并使用left屬性，我們可以輕松地將<div>元素定位到其初始位置的左側，并且仍然保持相對位置的特性。這為我們創建復雜的頁面布局提供了很大的靈活性和方便性。希望以上的解釋和示例對您理解和使用<div>標簽的左側定位有所幫助。