在div中移动div时“相对”位置不起作用

在div中移动div时，"相对"位置不起作用是因为div的定位属性没有设置为"relative"。相对定位是一种相对于元素自身原始位置进行定位的方式，通过设置top、bottom、left、right属性来控制元素的位置。如果没有设置相对定位，元素的位置将会受到其他因素的影响，例如文档流、父元素的定位等。

要解决这个问题，可以按照以下步骤进行操作：

1. 确保目标div的定位属性设置为"relative"。在CSS中，可以使用以下代码来设置：

div {
  position: relative;
}

1. 确保移动的div的定位属性设置为"absolute"。绝对定位是一种相对于最近的已定位父元素进行定位的方式，通过设置top、bottom、left、right属性来控制元素的位置。在CSS中，可以使用以下代码来设置：

.move-div {
  position: absolute;
}

1. 使用JavaScript或jQuery等前端框架来实现移动div的功能。可以通过监听鼠标事件或触摸事件，获取鼠标或触摸的位置，并将移动的div的位置设置为对应的坐标。以下是一个简单的示例代码：

var moveDiv = document.querySelector('.move-div');
moveDiv.addEventListener('mousedown', function(event) {
  var startX = event.clientX;
  var startY = event.clientY;
  
  document.addEventListener('mousemove', moveHandler);
  document.addEventListener('mouseup', endHandler);
  
  function moveHandler(event) {
    var offsetX = event.clientX - startX;
    var offsetY = event.clientY - startY;
    
    moveDiv.style.left = moveDiv.offsetLeft + offsetX + 'px';
    moveDiv.style.top = moveDiv.offsetTop + offsetY + 'px';
    
    startX = event.clientX;
    startY = event.clientY;
  }
  
  function endHandler() {
    document.removeEventListener('mousemove', moveHandler);
    document.removeEventListener('mouseup', endHandler);
  }
});

通过以上步骤，可以实现在div中移动div时相对位置起作用的效果。请注意，以上代码仅为示例，实际应用中可能需要根据具体情况进行适当的修改和优化。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云主页：https://cloud.tencent.com/
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云人工智能：https://cloud.tencent.com/product/ai
• 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
• 移动开发平台（MTP）：https://cloud.tencent.com/product/mtp