вопрос div с позицией: абсолют - PullRequest
1 голос
/ 14 декабря 2011

Я хочу разместить один div над другим. Я уже выполнил это с position:absolute;, но поведение на других разрешениях экрана отличается - в частности, div вверху перемещается влево. Кто-нибудь может разобраться в проблеме? Чтобы лучше понять мой вопрос, см. эту страницу.

Мой 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>

Ответы [ 3 ]

1 голос
/ 14 декабря 2011

Замените свой 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;
}
0 голосов
/ 14 декабря 2011

Пожалуйста, добавьте позицию: относительно flashplayercontainer div,

пример:

#flashplayercontainer{
    overflow: auto; 
    position:relative;


}

И настроить некоторые пиксели для верха и слева в ID adsbox.

0 голосов
/ 14 декабря 2011

Три вещи, которые вам нужны, чтобы изменить свой код.

1) Сделать это фиксированным вместо абсолютного

2) Слева и сверху сделать его% вместо px

какчто:

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

3) Если вы хотите также минимизировать и увеличить время (изменение размера окна).Вы должны написать JS для расчета положения деления я имею в виду (слева, сверху)

Я надеюсь, что его использование полностью.

...