Overlaying divs on responsive parent div with background image

Question

What I'm trying to achieve is a div container that is responsive but the ability to overlay highlight fields that will stay in the same place based on the parent div. I want to be able to highlight certain areas of text or form fields but have the form be responsive. Here's a link to an example: http://www.codeply.com/go/nufYSSEMir

As you can see the highlight div is position: absolute; so obviously it's going to stay exactly where it's at. I've tried using percents as top and left values but it doesn't scale with the background image. I have a feeling that my two options are to either have the width as a static value and set the meta viewport to scale to the window size, or get crazy with some JS and maybe jQuery.

Thanks in advance for any and all suggestions.

Answer 1

Simply add position: relative; to the #outerContainer , it works for me.

Answer 2

As said by divix, you need to set position : relative to the parent div. This will tell the browser that your highlight's position : absolute is absolute in reference to outerContainer.

Basically any position:absolute will look at the first parent that has a position set (whether it's relative, fixed, absolute etc) to calculate top|right|bottom|left offset. If you don't have any parent that has a position set, it will just take the body as a reference

Edit: In order the get the right responsivness try this :

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%;
}