两个DIVS在相互重叠时保持距离

在两个DIVS相互重叠时保持距离，可以通过CSS的定位属性和z-index属性来实现。

首先，需要给两个DIVS设置定位属性，例如使用position: absolute;或position: relative;。然后，通过top、bottom、left、right属性来调整它们的位置，以保持所需的距离。

接下来，使用z-index属性来控制两个DIVS的层叠顺序。较大的z-index值会使元素位于较小的z-index值之上。可以通过设置z-index属性的值来确保一个DIVS位于另一个DIVS的上方或下方。

以下是一个示例代码：

<style>
    .div1 {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 200px;
        height: 200px;
        background-color: red;
        z-index: 2;
    }
    
    .div2 {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 200px;
        height: 200px;
        background-color: blue;
        z-index: 1;
    }
</style>

<div class="div1"></div>
<div class="div2"></div>

在上面的示例中，div1和div2分别代表两个DIVS。它们通过设置不同的top和left属性来实现重叠，并通过z-index属性来控制层叠顺序。div1的z-index值为2，div2的z-index值为1，因此div1位于div2的上方。

这样，即使两个DIVS重叠在一起，它们之间仍然保持着一定的距离。根据具体的需求，可以调整top、bottom、left、right属性和z-index属性的值来达到所需的效果。

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

• 腾讯云CSS：https://cloud.tencent.com/product/css
• 腾讯云CDN：https://cloud.tencent.com/product/cdn
• 腾讯云云服务器CVM：https://cloud.tencent.com/product/cvm
• 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云云原生容器服务TKE：https://cloud.tencent.com/product/tke
• 腾讯云云安全中心：https://cloud.tencent.com/product/ssc
• 腾讯云云点播：https://cloud.tencent.com/product/vod
• 腾讯云人工智能平台：https://cloud.tencent.com/product/ai
• 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
• 腾讯云移动推送：https://cloud.tencent.com/product/tpns
• 腾讯云对象存储COS：https://cloud.tencent.com/product/cos
• 腾讯云区块链服务：https://cloud.tencent.com/product/baas
• 腾讯云虚拟私有云VPC：https://cloud.tencent.com/product/vpc
• 腾讯云弹性伸缩：https://cloud.tencent.com/product/as
• 腾讯云内容分发网络：https://cloud.tencent.com/product/cdn