1

内部に世界地図の画像が配置された Div があります。この Div 内に別の div があります。

私がやろうとしているのは、2 番目の div 内にいくつかのテキストを配置し、それを世界地図の画像の上に配置することです。問題なくこれを行うことができますが、ブラウザーのサイズを変更すると、2 番目の div が元の場所から移動したように見えます!

以下の画像で問題を示しました。

ここに画像の説明を入力

ブラウザのサイズを変更すると、次のようになります。

ここに画像の説明を入力

そして、ここに私のCSSがあります:

#body{
    top:0px;


}


#wrapper{
    position:absolute;
    width:100%;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    min-width:100%;

}

#flagHolder a:link, a:active, a:visited{
    font-family:Verdana, Geneva, sans-serif;
    color:#333;
    text-decoration:none;
      margin-left: auto ;
  margin-right: auto ;
}

#header{
    background-image:url(img/bg-header_footer.jpg);
    width:100%;
    height:250px;


}
#footer{
    background-image:url(img/footer.png);
    width:100%;
    height:250px;


}

#content{


}

#flagHolder{

    width:80%;
    border-radius:15px;
    border:solid 2px #ecf0f1;


}

#mapHolder{
    background-image:url(img/map.png);
    background-repeat:no-repeat;
    background-position:center;
    width:100%;
    height:419px;




}

#apDiv1 {
    position:relative;
    margin-right:30%;
    width:115px;
    height:100px;
    z-index:1;
    font-size:10px;
    font-family:Verdana, Geneva, sans-serif;
}

Map に従ってテキスト Div を相対的に保つにはどうすればよいですか?

編集：

HTMLは次のとおりです。

    <div id="wrapper" align="center">

    <div id="header"></div>

    <div id="content">



    <div id="mapHolder"  oncontextmenu='alert("Copyrighted Content");return false;'>

      <div id="apDiv1"  oncontextmenu='alert("Copyrighted Content");return false;'>
      LA, USA
      <div>



      </div>

    </div>
</div>
4

1 に答える 1

2

2番目のdivとその要素に対する相対位置ではなく、絶対位置を使用します......これが機能することを願っています

于 2013-07-31T12:37:29.990 に答える