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。我们需要将它与两个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;
}

Answer 2

您需要改变代码的三件事。

1）使其固定而不是绝对

2）Left和Top使它成为％而不是px

像那样：

#adsbox{
    background: #222;
    width: 930px;
    height: 480px;
    position: fixed;
    top: 20%;
    left: 15%;
}

3）如果你想要最小化和最大化（窗口大小调整）时间。你必须写JS Div i的位置计算（左，上）

我希望它能充分利用。

Answer 3

请添加位置：相对于flashplayercontainer div，

示例：

#flashplayercontainer{
    overflow: auto; 
    position:relative;


}

并在ID adsbox中调整顶部和左侧的部分像素。

div问题与位置：绝对

3 个答案: