Javascript 将div与背景图像叠加在响应的父div上

我试图实现的是一个div容器，它是响应的，但能够覆盖高亮显示字段，这些字段将基于父div保留在同一位置。我希望能够高亮显示文本或表单字段的某些区域，但表单是响应的。下面是一个示例链接：

正如您所看到的，高光div是position:absolute；所以很明显，它会保持在原来的位置。我曾尝试使用百分比作为顶部和左侧的值，但它不能与背景图像缩放。我有一种感觉，我的两个选择是要么将宽度设置为静态值，并将元视口设置为按窗口大小缩放，要么对一些JS和jQuery疯狂

---

提前感谢所有建议。

只需添加

位置：相对

到

#outerContainer

，它对我有效。

正如divix所说，您需要设置

位置：相对于父div。
这将告诉浏览器突出显示的
位置：绝对
相对于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%;
}

好的，这绝对是朝着正确的方向迈出的一步。我已将其添加到示例项目中。在视口的右下角，使用外部查看器并收缩窗口，直到形状本身开始随宽度收缩。对我来说，一旦背景形状开始缩小，高光字段就保持在同一个点上。也许可以通过媒体查询来解决这个问题？我宁愿在突出显示的顶部/左侧和宽度/高度中使用%。然后，使用媒体查询删除父div中的高度，并使用padding top hack获得固定的比率选中编辑我的响应，以获得更具可读性的建议！您必须修复%以匹配您想要的突出显示