javascript - Popup with same target location shows appears differently -

i have 2 popups come in line code:

<script type="text/javascript">     sys.debug = true;     var popup;     sys.require(sys.components.popup, function () {         popup = sys.create.popup("#popup", {             parentelementid: "target",         });     });     var popup2;     sys.require(sys.components.popup, function () {         popup2 = sys.create.popup("#popup2", {             parentelementid: "target",         });     }); </script> 

this "target" referencing:

<span id="target" style="position: absolute; top: 50%; left: 50%; margin-top: -125px;     margin-left: -200px;"></span> 

inline code:

<div id="popup" style="background: #eafdb3; color: #000; padding: 15px; margin: 0px">      //content </div> 

and:

<div id="popup2" style="background: #eafdb3; color: #000; padding: 15px; margin: 0px">      //content </div> 

the call:

<script>             sys.onready(function () {          popup.show();      }) </script> 

or:

<script>             sys.onready(function () {          popup2.show();      }) </script> 

when call first popup shows in middle of screen popup. second 1 (popup2) not. shows @ top left of screen pushing rest of content down. why?

edit, here css:

#popup {     width: 400px;     height: 250px;     overflow: scroll;     background-color: #eafdb3;     border: solid 2px black; } #popup2 {     width: 400px;     height: 250px;     background-color: #eafdb3;     border: solid 2px black; }