单击一个按钮将一个div覆盖另一个

Question

I have two visualizations, each in different div. I want to place one div over another on button click to overlay and compare them. Then, on another button click, I want to separate it out. Any code snippet or links would be appreciated. Right now I am just trying to make use of the following javascript function:

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

Answer 1

you should use absolute or relative positioning.

If your position property is not set to absolute or relative style.left and style.top won't have any effect.

The following will allow them to move (you just need to work out the coordinates:

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";

}

To undo it, simple set position back to static:

divObject.style.position = "static";

Answer 2

Here is very simple working example of moving three div's over one another on button click. HTML code

<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;
 }

js

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

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

 });

https://codepen.io/pranjalkoshti/pen/rYNQeL