我需要一个响应式背景图像，图像的左下角有一个叠加按钮(叠加按钮现在是灰色的，用于测试，但将不可见并用作可点击的链接区域)。此按钮需要随着图像调整大小而移动。
我试图通过在容器内设置一个带有背景图像和按钮的响应式 div“容器”来做到这一点。
响应式背景图片表现完美。我的灰色按钮是用 CSS % 制作的，并且是响应式的。但是，该按钮会粘在浏览器窗口的左侧，而不是容器 div 的左侧(我想要的位置)。
我知道这是因为我已将它设置为 left:0，但我认为它应该是父容器 div(图像)的 left:0。
谁能建议如何设置按钮定位，使其相对于容器 div？还是有别的办法？
这里的工作示例:http://jsfiddle.net/DigitalDesign/sQ63a/1/
非常感谢!
<!doctype html>
<html>
<head>
<title>Responsive positioning example</title>
<style type="text/css">
/* set doc as high as viewport */
html, body {padding:0; margin:0; width:100%; height:100%;}
/* background */
.container {
min-height:100%;
background: #bdecff url(abstract-bg2.jpg) top center no-repeat; background-size: contain;
/* imageMap responds to this*/
width: auto;
height: 100%;}
/*make imageMap container relative to outer container*/
.imageMap {height:100%; position:relative;}
.imageMap .link {width:100%;
height:100%;
position:absolute;
left:0;
top:0;
visibility: visible;}
.imageMap a {display:block;
position:absolute;
background:#3b3b3b;
z-index:100;
opacity:0.2;
filter:alpha(opacity=20);
border:none;
outline:none;}
.imageMap:hover .link {visibility:visible;}
.imageMap .link div:hover a {background:#000;
z-index:100;
opacity:0.1;
filter:alpha(opacity=10);
border:none;
outline:none;}
/* Left side bottom button */
.imageMap a.weblink {left:0%; top:78%; width:12%; height:10%;}
/*Right side button*/
.imageMap a.emaillink {left:87%; top:31%; width:13%; height:6%;}
</style>
</head>
<body>
<div class="container">
<div class="imageMap">
<div class="link">
<!--bottom page button-->
<div><a href="page2.html" class="weblink" target="_blank"></a></div>
<div><a href="mailto:#" class="emaillink" target="_blank"></a></div>
</div>
</div><!--end imageMap-->
</div><!--container-->
</body>
</html>
最佳答案
**) 根据需要更改宽度和高度，并确保 imageMap 的宽度是您希望与其他元素相关的宽度..
我删除了背景图片，然后设置了这样的普通图片
<body>
<div class="container">
<div class="imageMap">
<img src="http://i61.tinypic.com/24qnyix.jpg" style="width: 100%;height: 100%;max-width: 300px;max-height: 300px;"/>
<div class="link">
<!--bottom page button-->
<div><a href="page2.html" class="weblink" target="_blank"></a></div>
<div><a href="mailto:#" class="emaillink" target="_blank"></a></div>
</div>
</div><!--end imageMap-->
</div><!--container-->
像这样的CSS
/* set doc as high as viewport */
html, body {padding:0; margin:0; width:100%; height:100%;}
/* background */
.container {
min-height:100%;
background-size: contain;
/* imageMap responds to this*/
width: auto;
height: 100%;}
/*make imageMap container relative to outer container*/
.imageMap {height:100%; position:relative;max-width: 300px;width: 100%
height: 100%;
max-height: 300px;
.imageMap .link {width:100%;
height:100%;
position:absolute;
left:0;
top:0;
visibility: visible;}
.imageMap a {display:block;
position:absolute;
background:#3b3b3b;
z-index:100;
opacity:0.2;
filter:alpha(opacity=20);
border:none;
outline:none;
}
.imageMap:hover .link {visibility:visible;}
.imageMap .link div:hover a {background:#000;
z-index:100;
opacity:0.1;
filter:alpha(opacity=10);
border:none;
outline:none;}
/* Left bottom button */
.imageMap a.weblink {left:0%; top:78%; width:12%; height:10%;}
/*Right bottom button*/
.imageMap a.emaillink {left:87%; top:31%; width:13%; height:6%;}
关于html - CSS - 内部 div 不会留在外部 div 容器内，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24710706/