# Javascript: Make a DIV appear next to an existing element

**URL:** <https://boards.straightdope.com/t/javascript-make-a-div-appear-next-to-an-existing-element/489929>\
**Category:** Factual Questions\
**Created:** [March 18, 2009, 7:09pm UTC](https://boards.straightdope.com/t/javascript-make-a-div-appear-next-to-an-existing-element/489929 "2009-03-18T19:09:28Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![toadspittle](https://avatars.discourse-cdn.com/v4/letter/t/c0e974/32.png) [@toadspittle](https://boards.straightdope.com/u/toadspittle)\
**Post date:** [March 18, 2009, 7:09pm UTC](https://boards.straightdope.com/t/javascript-make-a-div-appear-next-to-an-existing-element/489929/1 "2009-03-18T19:09:28Z")

</div>

I’m trying to make a floating login DIV appear next to an ID-specified element (presumably, a text link—something we could easily specify in the HTML, and place wherever we like in the document: maybe at the top of a page, maybe in the body text that talks about logging in to see members-only content, etc.).

I know how to make DIVs appear and disappear by manipulating CSS styles:

(in this case, pop-up box is \<div id=“loginpopup” …  
link that was clicked has its own ID … say, \<a id=“putloginhere” …)

```auto

<script language="JavaScript">
function showLogin()
{document.getElementById('loginpopup').style.display='block';}
</script>

<script language="JavaScript">
function showLogin()
{document.getElementById('loginpopup').style.display='none';}
</script>

```

And, I can position elements when I know where I want them to be. But how can I solve this situation?

Basically, I’d like to write the DIV (\<div id=“loginpopup”…) into the page beforehand, set display=none, and then, after clicking the appropriate link (\<a id=“putloginhere” …), reposition the DIV to the vicinity of that clicked link and set display=block.

What’s the best way to get that position info.?

---

<div class="post-metadata">

**Author:** ![toadspittle](https://avatars.discourse-cdn.com/v4/letter/t/c0e974/32.png) [@toadspittle](https://boards.straightdope.com/u/toadspittle)\
**Post date:** [March 19, 2009, 12:50am UTC](https://boards.straightdope.com/t/javascript-make-a-div-appear-next-to-an-existing-element/489929/2 "2009-03-19T00:50:37Z")

</div>

Never mind; I sorted it out.