用背景圖像覆蓋響應父div上的div

Question

我想要實現的是一個具有響應能力的div容器，但能夠基於父div覆蓋將保留在同一位置的突出顯示字段。 我希望能夠突出顯示文本或表單字段的某些區域，但表單要具有響應性。 這是一個示例的鏈接： http : //www.codeply.com/go/nufYSSEMir

如您所見，高亮div是position：absolute; 所以很明顯它將保持原樣。 我嘗試使用百分比作為頂部和左側的值，但它不會隨着背景圖像縮放。 我有兩種感覺，要么將寬度設置為靜態值，然后將元視口設置為縮放至窗口大小，要么對某些JS和jQuery感到迷惑。

在此先感謝您提出任何建議。

Answer 1

只需添加position: relative; 到#outerContainer ，它對我#outerContainer 。

Answer 2

正如divix所說，您需要position : relative對於父div設置position : relative 。 這將告訴瀏覽器您的突出顯示position : absolute是相對於externalContainer而言的絕對值。

基本上任何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%;
}