我有一个 Div,其中有一个以世界地图为中心的图像。并且这个 div 中还有另一个 div。
我想做的是将一些文本放入第二个 div 并将其放在世界地图图像的顶部。我可以毫无问题地做到这一点,但是当我调整浏览器的大小时,似乎第二个 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>