Position div to the corner of the button clicked

Question

As shown in above image, I need to position DIV on the corner of the button clicked. This button can be any where on the page but when clicked it is opening a div and I want to set the position so it opens the div on its corner like in the image.

The div I want to open will be outside of div containing the button.

 function openPopup() { document.getElementById('test').style.display = 'contents'; } function closePopup() { document.getElementById('test').style.display = 'none'; }

 .popup-div { position: absolute; top: 0px; left: 0px; z-index: 10; display: none; }.popup { position: absolute; top: 0px; left: 0px; margin: 100px auto; width: 200px; height: 150px; font-family: verdana; font-size: 13px; padding: 10px; background-color: rgb(240, 240, 240); border: 2px solid grey; z-index: 100000000000000000; display: none }.cancel { display: relative; cursor: pointer; margin: 0; float: right; height: 10px; width: 14px; padding: 0 0 5px 0; background-color: red; text-align: center; font-weight: bold; font-size: 11px; color: white; border-radius: 3px; z-index: 100000000000000000; }.cancel:hover { background: rgb(255, 50, 50); }

 <div id="test" class=" popup-div"> This is a test message <div class="cancel" onclick="closePopup();"></div> </div> <button onClick="openPopup();">BUTTON</button>

Answer 1

html:

<div class="container">
    <button>Button</button>
    <div id="popup"></div>
</div>

css:

.cont {
    position: relative;
}

#popup {
    position: absolute;
    top: /* insert button height (incl. padding) here */
}

Answer 2

 .container { border: 2px solid red; } #popup { display: none; position: absolute; top: 10px; right: 15px; height: 85%; width: 40%; background: red; font-size: 55px; color: #fff; text-align: center; } h1 {}.clsbtn { margin-left: 80%; }

 <br> <br> <br> <br> <br> <br> <div class="container"> <br> <br> <br> <button onclick="document.getElementById('popup').style.display='block'">Button</button> <div id="popup"> <span onclick="document.getElementById('popup').style.display='none'" class="clsbtn">&times;</span> <h1> div </h1> </div> </div>