요소 위치를 다른 요소의 위치로 설정하는 방법.

요소 위치를 다른 요소의 위치로 설정하는 방법. 😎

예시:

HTML:

<div id="Elem1">😀</div>
<div id="Elem2">🕶</div>

<div id="btn">
    Wear Sun Glasses
</div>

CSS:

body{
    font-size: 30vh;
    user-select: none;
}
#btn{
    position: absolute;
    top: 2.5vh;
    font-size: 5vh;
    filter: brightness(100%);
    font-family: sans-serif;
    padding: 1vh;
    background: rgb(200,200,200);
    cursor: pointer;
    width: 40vw;
    text-align: center;
}
#btn:hover{

    filter: brightness(80%);
}
#Elem1{
    position: absolute;
    right: 1vw;
}
#Elem2{
    position: absolute;
    z-index: 3;
}

자바스크립트[OP]:

var btn = document.querySelector("#btn");
var e1 = document.querySelector("#Elem1");
var e2 = document.querySelector("#Elem2");

btn.addEventListener("click", function(){
    e2.style.left = e1.getBoundingClientRect().left + 20 + "px"; // With Offset Of 20px for correct postition
    e2.style.top = e1.getBoundingClientRect().top + "px"; 
});