DHTML popup window

Question

I am trying to make a DHTML window on my website and I can actually get it to popup for me. The problem I am having with it is when it pops up it moves the text around on the page. I have seen examples of DHTML popups where this doesn't occur for instance here: http://dhtmlpopups.webarticles.org/basics.php or here: http://www.php-development.ru/javascripts/popup-window.php

I cant figure out what I am doing wrong the div tag for my popup looks like this

<div id="loginPopup" style="position: relative; display:none; z-index: 500;"><div class="closeButton" onClick="javascript:document.getElementById('loginPopup').style.display = 'none';"></div></div>

My site also use a template and css that I got off the net, could that be the problem? I am at a loss for what to do to correct this, any help would be awesome.

Thanks!

Answer 1

use absolute positioning if you don't want it to move your other elements.

Answer 2

You want to position the div as 'absolute' not 'relative.' I would then use the 'top' and 'left' attributes to position the window.

div.loginPopup {
   position:aboslute;
   top:50px;
   left: 50px;
}