具有相同目标位置的弹出窗口显示不同

Question

我有两个来自行代码的弹出窗口：

<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>

这是他们引用的“目标”：

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

内联代码：

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

和

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

电话：

<script>        
    Sys.onReady(function () { 
        popup.show(); 
    })
</script>

或者：

<script>        
    Sys.onReady(function () { 
        popup2.show(); 
    })
</script>

当我调用第一个弹出窗口时，它会以弹出窗口显示在屏幕中间。第二个（popup2）没有。它显示在屏幕的左上方，推动其余内容。为什么呢？

编辑，这是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;
}