<div> 是 HTML 中最常用的標簽之一，用于創建容器來包裹其他 HTML 元素。而通過使用 CSS 中的定位屬性，我們可以控制 <div> 的位置，并且可以使用光標（cursor）樣式來改變鼠標指針的外觀。本文將介紹如何通過定位和光標樣式來改變 <div> 元素的位置和鼠標指針樣式。

我們來看一個例子，使用定位屬性將一個 <div> 元素放置在頁面的右上角：

<style>
.custom-div {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background-color: lightgray;
}
</style>
<br>
<div class="custom-div">
This is a custom div.
</div>

在上面的代碼中，我們使用了 CSS 中的 position 屬性，將 <div> 元素的定位屬性設置為 absolute，這意味著我們可以通過 top 和 right 屬性來控制 <div> 的位置。通過將 top 設置為 0，right 設置為 0，我們使 <div> 元素位于頁面的右上角。由于我們設置了寬度和高度，所以 <div> 元素有一個確定的大小。背景色設置為 lightgray，以便更好地看到 <div> 的位置。

接下來，我們將通過改變鼠標指針樣式來給 <div> 添加一些交互效果。例如，當鼠標懸停在 <div> 上時，我們希望鼠標指針的形狀變為手型。

<style>
.custom-div:hover {
cursor: pointer;
}
</style>
<br>
<div class="custom-div">
This is a custom div.
</div>

在上面的代碼中，我們使用了 CSS 中的 :hover 偽類，當鼠標懸停在 <div> 上時，將應用 cursor: pointer 樣式，這樣鼠標指針的形狀將變為手型。這樣，用戶在懸停在 <div> 上時，會感到可以點擊該元素。

除了手型之外，CSS 還提供了其他一些常用的鼠標指針樣式，如默認樣式（default）、文本樣式（text）、禁止樣式（not-allowed）等等。下面是一些具體的例子：

<style>
.custom-div-1 {
cursor: default;
}
<br>
    .custom-div-2 {
cursor: text;
}
<br>
    .custom-div-3 {
cursor: not-allowed;
}
</style>
<br>
<div class="custom-div-1">
This is a custom div with default cursor.
</div>
<br>
<div class="custom-div-2">
This is a custom div with text cursor.
</div>
<br>
<div class="custom-div-3">
This is a custom div with not-allowed cursor.
</div>

在上面的代碼中，分別使用了 cursor 的 default、text 和 not-allowed 屬性值來改變鼠標指針的形狀，從而分別得到了默認樣式、文本樣式和禁止樣式的效果。

通過使用定位和光標樣式，我們可以靈活地控制 <div> 元素的位置和鼠標指針的外觀。這樣可以為用戶提供更好的交互體驗，增強頁面的可用性。