單擊一個按鈕將一個div覆蓋另一個

Question

我有兩個可視化效果，每個都在不同的div中。 我想在單擊按鈕時將一個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;    
}

Answer 1

您應該使用絕對或相對定位。

如果您的position屬性未設置為absolute或relative style.left和style.top將不起作用。

以下內容將允許他們移動（您只需要計算坐標即可：

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

Answer 2

這是一個非常簡單的工作示例，在單擊按鈕時將三個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;
 }

js

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

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

 });

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