html - 位置 :absolute 的 div 问题

Question

我想将一个 div 放在另一个之上。我已经使用 position:absolute; 实现了这一点，但是在其他屏幕分辨率下的行为是不同的——具体来说，顶部的 div 向左移动。谁能弄清楚这个问题？为了更好地理解我的问题，请参阅 this页面。

我的 CSS:

#flashplayercontainer{
    overflow: auto;
}
#flashplayer{
    width: 975px;
    margin: 0 auto;
    background-color:#666666;
    border:#CC0000 thick 2px;
}
#adsbox{
    background: #222;
    width: 930px;
    height: 480px;
    position: absolute;
    top: 350px;
    left: 205px;
}
#cpmbox{
    margin: 0 auto;
    margin-top: 40px;
    width: 500px;
    text-align: center;
}

#cpmbox h2{
    color: #FFF;
    margin-bottom: 20px;
}

#cpmbox a {
    color: #FC0;
    cursor: pointer;
}

</style>

我的 HTML:

<div id="flashplayercontainer">
    <div id="flashplayer"> 
        ...
    </div>
    <div id="adsbox" style="height: 400px;">
        <div id="cpmbox">
        <h2>Loading.......</h2>
            <script type="text/javascript">document.write("<iframe src='http://www.epicgameads.com/ads/banneriframe.php?id=yeA5z58737&t=300x250&channel=2&cb=" + (Math.floor(Math.random()*99999) + new Date().getTime()) + "' style='width:300px;height:250px;' frameborder='0' scrolling='no'></iframe>");</script>
            <p><a id="closeads">Close This Ads (<span id="covertimer">20</span>)</a></p>
        </div>
     </div>
    </div>
</div>

Answer 1

替换你的CSS。我们需要使它的 Position % 与两个 div 相等，我认为它工作得很好。

#flashplayercontainer{
    overflow: auto;
}
#flashplayer{
    width: 975px;
    margin: 0 auto;
}

#adsbox, #cpmbox {
  width: 930px;
  height: 480px;
  border:#CC0000 thick 2px;
}
#adsbox {
    bottom: 50%;
    right: 50%;
    position: absolute;
}
#cpmbox {
    left: 50%;
    position: relative;
    background-color:#666666;
    top: 50%;
    margin: 0 auto;
    margin-top: 40px;    
    text-align: center;
}   
#cpmbox h2{
    color: #FFF;
    margin-bottom: 20px;
}

#cpmbox a {
    color: #FC0;
    cursor: pointer;
}