Javascript 单击按钮，将一个div覆盖在另一个div上

我有两个可视化效果，每个都在不同的分区中。我想把一个分区放在另一个分区上，点击按钮覆盖并比较它们。然后，点击另一个按钮，我想把它分开。任何代码片段或链接将不胜感激。现在，我正在尝试使用以下javascript函数：

function ShowOverlay(divID, xCoordinate, yCoordinate) {    
    var divObject = document.getElementById(divID);    
    divObject.style.visibility = "visible";    
    divObject.style.left = xCoordinate;    
    divObject.style.top = yCoordinate;    
}

---

您应该使用绝对或相对定位

如果您的

位置

属性未设置为

绝对

或

相对

样式，则左侧

和

样式。顶部

将不起任何作用

以下将允许它们移动（您只需计算出坐标：

function ShowOverlay(divID, xCoordinate, yCoordinate) {

    var divObject = document.getElementById(divID);

    divObject.style.visibility = "visible";
    divObject.style.left = xCoordinate;
    divObject.style.top = yCoordinate;
    divObject.style.position = "absolute";

}

要撤消此操作，请简单地将“位置”设置回“静态”：

divObject.style.position = "static";

---

下面是一个非常简单的工作示例，通过单击按钮将三个div相互移动。 HTML代码

<div class="container">
 <div class = "circlea"><h2>link</h2></div>
 <div class = "circleb"><h2>link</h2></div>
 <div class = "circlec"><h2>link</h2></div>
 <button >click me</button>
</div>


.circlea,.circleb,.circlec{
 height:150px;
 width:150px;
 border-radius:50%;
 margin-left:50%;
 margin-top:120px;
 position: absolute;
 transition: all 1s ease-in-out;
 opacity:0;
 color:white;
 text-align:center; 
}

.circlea{
 background-color:rgba( 20, 155, 138 );
 }

.circleb{
 background-color:rgba( 155, 20, 144 );
}

.circlec{
 background-color:rgba( 24, 155, 20);
 opacity:1;
}

button{
 background-color:tomato;
 width:100px;
 padding:10px;
 color:white;
 }

.transforma{
 margin-left:200px;
 opacity:1;
 }

.transformb{
  margin-left:800px;
  opacity:1;
 }

.transformb{
 opacity:1;
 }

---

它仍然不移动。覆盖类是.divOverlay{top:0px；left:0px；position:absolute；z-index:500；}，新的坐标是100和200sure。（不同的部分显示了我的问题的相关部分-divOverlay类，JS overlay函数，如果你向下滚动，你会看到实际的div类和按钮。感谢你的努力，但这是一个巨大的代码墙，格式不好。像这样的调查有点困难。有可能cre吗吃了JSFIDLE？如果你不知道JSFIDLE，它是一个JS、HTML和CSS的在线游乐场。你可以在这里查看：如果你尝试在那里复制行为，我会看看它，我会尽力帮助你。一旦我把它放在那里，我会让你知道的。谢谢。嘿！看起来我在sp时犯了一个愚蠢的单引号和双引号错误指定坐标。现在可以了。非常感谢！：）理想的解决方案取决于div层的html、用于覆盖的div的html、包装器（如果有），当然还有一些关键的css，使它们保持默认状态。因为理想的解决方案可能像

[overlay div].style.position=“absolute”

一样简单。

 $("button").click(function(){

  $("div.circleb").toggleClass("transformb");
  $("div.circlea").toggleClass("transforma");

 });