在網頁制作中，地圖定位和圖標標注是常見的需求。好的圖標定位可以讓用戶更好地了解信息和方便快速的找到所需要的位置。 CSS在處理圖標定位中提供了多種解決方案。其實CSS也可以應用在地圖標注上。 首先，我們需要定義一個地圖容器。以下是一個地圖容器的代碼示例，容器的大小和位置可以根據實際需求進行修改。

.map {
position: relative;
width: 1000px;
height: 600px;
background-image: url('map.jpg');
}

以上代碼中，我們定義了一個大小為1000px*600px的地圖容器，并且將背景圖設置為map.jpg。 接下來，我們定義一個圖標容器。圖標容器需要設置樣式position為absolute，使得其相對于地圖容器進行定位。以下是一個圖標容器的代碼示例。

.icon {
position: absolute;
top: 100px;
left: 200px;
}

以上代碼中，我們定義了一個圖標容器，其相對于地圖容器向下偏移100px，向右偏移200px。 為了讓圖標顯示在圖標容器中，我們需要在圖標容器中添加一個圖標元素。以下是一個圖標元素的代碼示例。

.icon::before {
content: '';
display: block;
width: 30px;
height: 30px;
background-image: url('icon.png');
}

以上代碼中，我們定義了一個偽元素::before，它會在圖標容器的最上層覆蓋一個30px*30px大小的背景圖icon.png。 最后，將圖標容器加入到地圖容器中，即可以完成地圖標注。以下是地圖標注的代碼示例。

<div class="map">
<div class="icon"></div>
</div>

以上是一個簡單的地圖標注實現。我們可以通過修改圖標容器的top、left、background-image屬性來自由定位和更換圖標。利用CSS地圖定位，我們可以輕松地完成地圖標注的需求。