CSS absolute child behind its parent
<p><strong>CSS only</strong></p>

<p>I'd like to have my absolute positioned <code>div</code> behind it's (relative) parent,
<strong>but</strong> still stay on top of it's parent siblings.
So using a negative <code>z-index</code> value won't help here...</p>

<p>This <a href="https://jsfiddle.net/naomipol12/w6h6qgdy/1/" rel="nofollow noreferrer">fiddle</a> is actually the opposite of what I'm looking for:
The parent div (on the left) should be on top of green child div and the sibling div (on the right) should be behind it.</p>

<p>Any idea here?</p>