JSFiddle - React, Tailwind, and code Playground

HTML

<h3>The problem:</h3>
<div class="positioned-parent styled-banner">
    <div class="underneath">Hold on... I am not underneath my mommy</div>
</div>

<br /><br /><br />

<h3>Fixed!</h3>
<div class="positioned-parent">
    <div class="styled-banner">
        <div class="underneath">YAY!! I am underneath my mommy</div>
    </div>
</div>

<br /><br /><br /><br /><br />

<p>The solution to positioning something <b>BEHIND</b> an ancestor is to make sure the ancestor is not stacked using z-index.  This is because <code>z-index</code> creates a new stacking order for that node and all of it's children.  As soon as you apply <code>z-index</code> to something, then nothing inside of it can ever go underneath or behind it.  In summary: <q>A node can <em>NEVER</em> be positioned underneath it's positioned &amp; stacked parent.</q></p>
<p>If you wish to support IE7, you can't <code>position</code> any of the elements in between either.  (see the commented line on <code>.styled-banner</code>).</p>
<p><b>NOTE:</b> you can use <code>z-index:auto;</code> to essentially remove z-index on an element in situations where <code>z-index</code> is inherited from a shared style.</p>
<p><b>NOTE 2:</b> this example also fixes the annoying <code>overflow:hidden</code> bug (<a href="http://stackoverflow.com/questions/2756851/how-do-i-stop-internet-explorers-propriety-gradient-filter-from-cutting-off-con/9039746#9039746">discussed here</a>) in IE when using <code>filter</code> styles (view in IE to see what I mean).</p>

CSS

.positioned-parent {
    position: absolute;
    z-index: 10;
    width: 90%;
    height:20px;
    border: 1px dashed red;
}
/* style the banner (overlapping) element here */
.styled-banner {
    /*position: relative; /* Does not work in IE7 */
    color: #222;
    height: 2em;
    line-height: 2;
    background: rgb(30,87,153); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(125,185,232,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
    background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); 
    background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%);
    background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); 
    background: linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}
.underneath {
    width: 100%;
    height: 100%;
    background-color: green;
    top: 60%;
    left: 5%;
    /* the important stuff */
    position: absolute;
    z-index: -1;
}

p {
    margin-bottom: 1.5em;
}
code {
    background-color: #ddd;
    padding: 0 .5em;
}
q {
    font-style: italic;
}