要在 div 的右上角显示一个复制按钮，你可以使用 CSS 来定位按钮。以下是一个简单的示例：

HTML

<div class="container">
  这是要复制的文本内容
  <button class="copy-button">复制</button>
</div>

CSS

.container {
  position: relative; /* 使子元素可以相对于此元素定位 */
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

.copy-button {
  position: absolute; /* 绝对定位 */
  top: 10px; /* 距离顶部的距离 */
  right: 10px; /* 距离右侧的距离 */
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 3px;
}

/* 小技巧，这样设置button里的文本就不用处理了 */
.copy-button:before {
    content: "复制";
}

.copy-button:hover {
  background-color: #0056b3;
}

JavaScript (可选)

如果你希望点击按钮时复制文本内容，可以添加以下 JavaScript 代码：

document.querySelector('.copy-button').addEventListener('click', function() {
  const textToCopy = document.querySelector('.container').innerText;
  navigator.clipboard.writeText(textToCopy).then(function() {
    alert('文本已复制到剪贴板');
  }).catch(function() {
    alert('复制失败');
  });
});

解释

  1. position: relative;：将 container 设置为相对定位，以便子元素可以相对于它进行定位。
  2. position: absolute;：将 copy-button 设置为绝对定位，使其可以相对于 container 进行定位。
  3. top: 10px; right: 10px;：将按钮定位在 container 的右上角，距离顶部和右侧各 10px。
  4. JavaScript：点击按钮时，复制 container 中的文本内容到剪贴板。

这样，你就可以在 div 的右上角显示一个复制按钮，并且点击按钮时可以复制 div 中的内容。