Javascript CSS缩放和变换导致重叠

在HTML页面中，我试图使用CSS transform scale属性实现缩放功能。在HTML页面中，我有更多的div元素，所有元素都是使用绝对位置技术放置的。然后我将“缩放”属性应用于每个div，我可以像缩放一样看到，但所有div位置都会彼此折叠。因此，在应用缩放后，如何避免塌陷并保持彼此之间的间隙

请建议我如何停止重叠，以及如何根据缩放属性计算每个元素的左侧和顶部位置

var zoomScale=1； $document.readyfunction{ $zoomin.clickfunction{ 如果ZoomScale>=4返回； zoomScale=zoomScale+1； 疾病状态； 阿普利祖敏； }; 函数applyZoomIn{ $.zoomable.eachfunctionindex{ var left=$this.position.left； var top=$this.position.top； var newLeft=left*缩放比例+px； var newTop=top*zoomScale+px； $this.css'transform'、'scale'+zoomScale+'、'+zoomScale+ }; } 功能状态{ $displayStatus.text当前缩放比例：+zoomScale； } 疾病状态； }; 容器{ 宽度：500px； 高度：500px； 边框：1px纯红； 位置：相对位置； 溢出：自动； } .可缩放{ 背景颜色：浅蓝色； 边框：1px纯红； 宽度：100px； 高度：100px； 位置：绝对位置； 变换原点：左上角； } 放大 第一组 第二组 您可以将.zoomable div添加到另一个名为.internal container的父容器中，并向其添加缩放功能。所以.container div将不会被缩放，而可缩放div将保持其位置

请参见下面的代码段：

var zoomScale=1； $document.readyfunction{ $zoomin.clickfunction{ 如果ZoomScale>=4返回； zoomScale=zoomScale+1； 疾病状态； 阿普利祖敏； }; 函数applyZoomIn{ $.inner container.css'transform'，'scale'+zoomScale+'，'+zoomScale+； } 功能状态{ $displayStatus.text当前缩放比例：+zoomScale； } 疾病状态； }; .可缩放{ 背景颜色：浅蓝色； 宽度：100px； 高度：100px； 位置：绝对位置； 边框：1px纯红； } 容器{ 宽度：500px； 高度：500px； 边框：1px纯红； 位置：相对位置； 溢出：自动； } .内胆{ 变换原点：左上角； } 放大 第一组 第二组

---

如果您可以使用CSS3 Flexbox和网格布局定位元素，浏览器将负责转换父flex/网格项！或者，您可以为和提供一个单点。只需将.zoomable类添加到.container div中，而不是添加到.container div中。如果这样做，则必须指定包含可缩放类元素的容器元素的类名。它还假设内部容器中的所有内容都应该缩放，这是一个巨大的假设。此建议非常违反直觉，会导致维护问题。