将 div 叠加在带有背景图像的响应式父 div 上

Question

我试图实现的是一个响应式的div容器，但能够覆盖将根据父div保留在同一位置的突出显示字段。 我希望能够突出显示文本或表单字段的某些区域，但要使表单具有响应性。 下面是一个示例的链接：http://www.codeply.com/go/nufYSSEMir

正如你所看到的，亮点div是位置：绝对;所以很明显它会准确地停留在它所在的位置。 我尝试使用百分比作为顶部和左侧值，但它不能与背景图像一起缩放。 我有一种感觉，我的两个选择是要么将宽度作为静态值并将元视口设置为缩放到窗口大小，要么对一些 JS 和 jQuery 感到疯狂。

提前感谢任何和所有建议。

Answer 1

正如divix 所说，您需要将position : relative设置为父div。这将告诉浏览器，您的突出显示position : absolute在引用 outerContainer 时是绝对的。

基本上，任何position:absolute都会查看第一个具有位置集（无论是相对的、固定的、绝对的等）的父项来计算上|右|下|左偏移量。如果您没有任何设置位置的父项，则只会将正文作为参考

编辑：为了获得正确的响应，请尝试以下操作：

body {
    background-color:#ddd;
}
#outerContainer {
    background: transparent url("http://scontent-ord1-1.xx.fbcdn.net/hphotos-xpl1/t31.0-8/s960x960/12605534_504076036438839_6108375615162000201_o.jpg") no-repeat scroll center top / 100% auto;
    height: 960px;
    margin: 0 auto;
    max-width: 742px;
    width: 100%;
    position: relative;
}
@media only screen AND (max-width:742px){
   #outerContainer {
       height:0;
       padding-top:129.5%;
   } 
}
#innerContainer {
    background-color: rgba(0, 255, 0, 0.5);
    border: 1px solid #000;
    height: 8%;
    left: 12%;
    position: absolute;
    top: 14%;
    width: 30%;
}

Answer 2

只需将position: relative;添加到#outerContainer，它对我有用。