fix overlaying element to its underlying img in CSS

Following siutation: I have a background image in my header. Then i want to put a shape or another element on it. When i resize the page, the overlaying element should stay at the same position on my underlying image.

Grouping both together is no option because I animate the element. How could I solve this problem in CSS?

Header:

<header id="header">
    <div id="head" class="parallax" style="background-position: 50% 0px;">
        <div id="overlaying-element">Element</div>   
    </div>
</header>

CSS:

#head {
    background: #f4f4f4 url(../img/test.jpg) top center;
    background-size: cover;
    color: #7C7C7C;
    padding: 240px 0 200px;
}

#overlaying-element {
     margin-left: 30%;
     width: 500px;

 }

To sum up: the distance of the blue arrows should stay the same during resizing.