<div>嵌套<position>是CSS中常用的一種布局技術，可以實現靈活的定位效果。通過給內層<div>元素設置position屬性，可以將其相對于外層<div>元素進行定位。position屬性有多個取值，包括static、relative、absolute和fixed等。下面通過幾個代碼案例來詳細解釋說明這個布局技術的使用方法和效果。

第一個案例是使用relative定位來實現一個簡單的居中效果。具體代碼如下：

<style>
.outer {
width: 400px;
height: 300px;
background-color: lightgray;
}
.inner {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: orange;
}
</style>
<br>
<div class="outer">
<div class="inner"></div>
</div>

在這個案例中，外層<div>元素的寬度為400px，高度為300px，背景顏色為lightgray。內層<div>元素的position屬性被設置為relative，表示其相對于外層<div>元素進行定位。通過top和left屬性的設置，將內層<div>元素的左上角定位到外層<div>元素的中心位置。而通過transform屬性的設置，可以將內層<div>元素自身的中心點定位到外層<div>元素的中心位置，從而實現了居中效果。

第二個案例是使用absolute定位來實現一個水平垂直居中的效果。具體代碼如下：

<style>
.outer {
width: 400px;
height: 300px;
background-color: lightgray;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: orange;
}
</style>
<br>
<div class="outer">
<div class="inner"></div>
</div>

在這個案例中，外層<div>元素的設置與第一個案例相同。內層<div>元素的position屬性被設置為absolute，表示其相對于最近的已定位祖先元素進行定位。通過top和left屬性的設置，將內層<div>元素的左上角定位到外層<div>元素的中心位置。而通過transform屬性的設置，同樣將內層<div>元素自身的中心點定位到外層<div>元素的中心位置，從而實現了水平垂直居中的效果。

第三個案例是使用fixed定位來實現一個固定定位的效果。具體代碼如下：

<style>
.container {
width: 100%;
height: 1000px;
padding-top: 500px;
background-color: lightgray;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: orange;
}
</style>
<br>
<div class="container">
<div class="sidebar"></div>
</div>

在這個案例中，外層<div>元素的寬度為100%、高度為1000px，其中通過padding-top屬性實現了一個占位效果。內層<div>元素的position屬性被設置為fixed，表示其相對于瀏覽器窗口進行定位。通過top和left屬性的設置，將內層<div>元素定位到瀏覽器窗口的左上角。由于內層<div>元素的高度被設置為100%，所以其會填滿整個瀏覽器窗口的高度，實現了一個固定定位的效果。

通過上述幾個案例的演示，可以看到<div>嵌套<position>技術的靈活性和強大性。通過適當的使用不同的position屬性取值，可以實現各種不同的定位效果，滿足不同的布局需求。