我有一个 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;
}
如何让文本Div根据Map保持相对?
编辑:
这是 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>
最佳答案
使用相对于你的第二个 div 及其元素的绝对位置而不是相对位置......希望这有效
关于css - 将 Div 定位在另一个具有居中背景图像的 Div 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17970284/