div嵌套定位是指將一個div元素嵌套在另一個div元素中，并通過CSS樣式來進行定位。在前端開發中，使用div嵌套定位可以實現更靈活的布局和設計效果。接下來，我們將通過幾個代碼案例來詳細說明div嵌套定位的使用方法和效果。
案例一：水平居中 在這個案例中，我們希望將一個div元素水平居中顯示在頁面中。，我們需要創建一個外層div，并設置其樣式為相對定位(position: relative;)，然后再在內部創建一個子div，并設置其樣式為絕對定位(position: absolute;)，并將left屬性設置為50%，然后再通過transform屬性的translateX()方法，將子div的位置左移自身寬度的一半(-50%)。代碼如下所示：

<div class="outer">
<div class="inner">Hello World</div>
</div>

.outer {
position: relative;
width: 100%;
height: 100vh;
}
<br>
.inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

案例二：垂直居中 在這個案例中，我們希望將一個div元素垂直居中顯示在頁面中。類似于案例一，我們需要創建一個外層div，并設置其樣式為相對定位(position: relative;)。然后，在內部創建一個子div，并設置其樣式為絕對定位(position: absolute;)，并將top屬性設置為50%，然后再通過transform屬性的translateY()方法，將子div的位置上移自身高度的一半(-50%)。代碼如下所示：

<div class="outer">
<div class="inner">Hello World</div>
</div>

.outer {
position: relative;
width: 100%;
height: 100vh;
}
<br>
.inner {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

案例三：兩欄布局 在這個案例中，我們希望實現一個簡單的兩欄布局，左側欄固定寬度，右側欄自適應寬度。我們可以通過嵌套的方式實現這個效果。，我們創建一個外層div，并設置其樣式為display: flex;，這樣可以讓內部的兩個div并排顯示。然后，我們再在左側的div中創建一個內層div，并設置其樣式為position: sticky;，這樣可以讓左側欄保持在頁面的固定位置。代碼如下所示：

<div class="container">
<div class="sidebar">
<div class="sticky">Left Sidebar</div>
</div>
<div class="content">Main Content</div>
</div>

.container {
display: flex;
}
<br>
.sidebar {
width: 200px;
}
<br>
.sticky {
position: sticky;
top: 0;
}
<br>
.content {
flex: 1;
}

綜上所述，div嵌套定位是一種常用的前端布局技巧。通過合理設置div的父子關系和CSS樣式，我們可以實現各種復雜的布局和設計效果。希望以上的案例能夠幫助您更好地理解和運用div嵌套定位。