Q:

CSS positioning elements to overlay (Wordpress Theme)

<body style = "background-color: yellow">
<div style = "background-color: red; width: 300px; height: 300px">
</div>
<div style = "background-color: green; width: 300px; height: 300px; top: -200px; position: relative;">
</div>
<div style = "background-color: orange; width: 300px; height: 300px">
</div>
</body>

https://jsfiddle.net/e2n32pof/ of problem
Apologies for the awful diagram, if you want to tamper with the page, i've set the it up at:
http://amigoscardiff.co.uk/contact
I'm working on a Wordpress site.  It's using one of the all-in-one themes and i don't really have extensive experience excluding with CSS.  I have three elements that i'm trying to put together in a certain way.  Essentially, the first element is an image that sits below the header.  The second element is an image that will overlay the first image.  And the third is an element that will sit below the first element.  See picture below: 

Currently, my experience with the positioning attribute is very weak, having barely had to overlay images in the past.  From what i've read, all the position Attributes still leave an empty space where the element would have been if i do say:
"top: -100px". 
I'm not really sure how to go about this problem, especially when not using a raw html file to try and troubleshoot.  Any clarification would be great, or if there's another way to go about the problem then i'd love to hear it. 

A:

I didnt fully understand your question but one of these will hopefully help:
https://jsfiddle.net/roLzL23n/
<div style = "background-color: red; width: 300px; height: 300px">
</div>
<div style = "background-color: green; width: 300px; height: 300px; top: -200px; position: relative;">
</div>
<div style = "background-color: orange; margin-top: -200px; width: 300px; height: 300px">
</div>

Or
https://jsfiddle.net/ftees7jt/
<div style = "background-color: red; width: 300px; height: 300px">
</div>

<div style = "background-color: green; width: 300px; height: 300px; margin-top: -200px;">
</div>

<div style = "background-color: orange; margin-top: -200px; width: 300px; height: 300px">
</div>

