如何创建一个看起来像是浮动在div上的窗体？

<div class="container">
  <div class="floating-window">
    <div class="window-header">窗体标题</div>
    <div class="window-content">窗体内容</div>
  </div>
</div>

.container {
  position: relative;
  width: 100%;
  height: 100vh; /* 视口高度 */
  background-color: #f0f0f0;
}

.floating-window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  z-index: 1000; /* 确保窗体在最上层 */
}

.window-header {
  padding: 10px;
  background-color: #f1f1f1;
  border-bottom: 1px solid #ccc;
  cursor: move; /* 允许拖动窗体 */
}

.window-content {
  padding: 10px;
}

document.addEventListener('DOMContentLoaded', function() {
  const floatingWindow = document.querySelector('.floating-window');
  const header = document.querySelector('.window-header');
  let isDragging = false;
  let offsetX, offsetY;

  header.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - floatingWindow.offsetLeft;
    offsetY = e.clientY - floatingWindow.offsetTop;
  });

  document.addEventListener('mousemove', (e) => {
    if (isDragging) {
      floatingWindow.style.left = `${e.clientX - offsetX}px`;
      floatingWindow.style.top = `${e.clientY - offsetY}px`;
    }
  });

  document.addEventListener('mouseup', () => {
    isDragging = false;
  });
});