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

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

<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> 元素的定位屬性設(shè)置為 absolute，這意味著我們可以通過 top 和 right 屬性來控制 <div> 的位置。通過將 top 設(shè)置為 0，right 設(shè)置為 0，我們使 <div> 元素位于頁(yè)面的右上角。由于我們?cè)O(shè)置了寬度和高度，所以 <div> 元素有一個(gè)確定的大小。背景色設(shè)置為 lightgray，以便更好地看到 <div> 的位置。

接下來，我們將通過改變鼠標(biāo)指針樣式來給 <div> 添加一些交互效果。例如，當(dāng)鼠標(biāo)懸停在 <div> 上時(shí)，我們希望鼠標(biāo)指針的形狀變?yōu)槭中汀?/p>

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

在上面的代碼中，我們使用了 CSS 中的 :hover 偽類，當(dāng)鼠標(biāo)懸停在 <div> 上時(shí)，將應(yīng)用 cursor: pointer 樣式，這樣鼠標(biāo)指針的形狀將變?yōu)槭中汀＿@樣，用戶在懸停在 <div> 上時(shí)，會(huì)感到可以點(diǎn)擊該元素。

除了手型之外，CSS 還提供了其他一些常用的鼠標(biāo)指針樣式，如默認(rèn)樣式（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 屬性值來改變鼠標(biāo)指針的形狀，從而分別得到了默認(rèn)樣式、文本樣式和禁止樣式的效果。

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