要获取鼠标在`div`中的相对位置，我们可以使用JavaScript的`mousemove`事件监听器来获取鼠标的坐标，并通过比较这些坐标与`div`元素的坐标来确定鼠标在`div`中的相对位置。以下是一个简单的实现示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Position in Div</title>
<style>
#myDiv {
width: 300px;
height: 200px;
position: relative;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div id="myDiv">
Move your mouse inside this div.
</div>
<script>
const div = document.getElementById('myDiv');
div.addEventListener('mousemove', function(event) {
// 计算鼠标在div中的相对位置
// 减去边框和填充（如果有的话）
const rect = div.getBoundingClientRect();
const x = event.clientX - rect.left - div.clientLeft;
const y = event.clientY - rect.top - div.clientTop;
// 可以在这里使用x和y，比如打印到控制台
console.log(`Mouse position in div: X=${x}, Y=${y}`);
// 或者，如果你想要在页面上显示这些信息，可以修改下面的span元素
// 但为了保持示例简单，这里只打印到控制台
});
</script>
</body>
</html>
这段代码首先定义了一个`div`元素，并设置了一些样式。然后，它给这个`div`添加了一个`mousemove`事件监听器。当鼠标在`div`内部移动时，会触发这个监听器，并计算鼠标的`x`和`y`坐标（相对于`div`的左上角）。这些坐标考虑了`div`的边界和可能的填充（如果有的话），以确保计算出的位置是准确的。
请注意，这个示例中并没有在页面上显示鼠标位置，而是将其打印到了控制台。如果你想要在页面上显示这些信息，你可以修改DOM来包含这些信息，或者使用JavaScript来更新页面上某个元素的内容。