Make child absolute within parent but not on page CSS

I'm at a project where I need all images within a div to be placed at the same place for an animation where I've put the images to be absolute to stack on top of each other though this interupts the rest of the code when scaling the page.

• Example start -

HTML

    <div class="a b">
         <div class="c d">
            <div class="e">
                <img class="f" src="" alt="image"/>
            </div>
        </div>
        <div class="c d">
            Some content
        </div>
    </div>

CSS

    .a {
        clear: both;
        padding: 0px;
        margin: 0px;
        width: 100%; }

    .b:before,
    .b:after {content:""; display: table; }
    .b:after {clear:both; }

    .c {
        display: block;
        float: left;
        margin: 1% 0 1% 0%;
        }

    .d {
        margin: 0;
        padding: 0;
        width: 50%; 
        }

    .e {
        position: relative;
        margin: 100px auto;
        width: 100%;
        max-width: 640px;
        height: auto;
        max-height: 640px;
        vertical-align: center;
        }

    .f {
        position: absolute;
        margin: 0;
        padding: 0; 
        }

• Example end -

As said this works great on fullscreen but when resizing the second class="c d" appears overlapped by the first class="c d" and I would like them to be stacked underneath eachother instead as the did before I created class="f", is there any way to do this with pure css?