div won't lay behind parent - html

Question

I have tried playing around with z-index and with position, but I can't get the hair-main div to stack behind the head div. Obviously I want the child div to sit behind the parent.
.goals {
align-items: center;
background: #e3e3e3;
display: flex;
grid-row: 3/4;
height: 500px;
width: 100vw;
}
.circle {
display: table-cell;
/*vertical-align: middle;*/
background: #3c759a;
border-radius: 100%;
height: 300px;
overflow: hidden;
position: relative;
width: 300px;
}
.body {
background: #222;
border-radius: 35px;
height: 400px;
left: 75px;
position: relative;
top: 170px;
width: 150px;
}
.head {
background: #ffe4be;
border-radius: 20px;
height: 100px;
left: 100px;
position: absolute;
top: 80px;
width: 100px;
}
.hair-main {
background: #e7ab57;
border-radius: 34px 34px 0px 0px;
height: 70px;
left: -10px;
position: relative;
top: -10px;
width: 120px;
}
<div class="goals">
<div class='circle'>
<div class='body'></div>
<div class='head'>
<div class="hair-main"></div>
</div>
</div>
</div>

Answer 1

Your statement of "obviously, I want the child div to sit behind the parent" is counter to the way html works (*sometimes). Obviously, the child element sits within the parent above the previous items within that parent, unless re-ordered by z-index, barring any -1 z-index tricks... or javascript manipulation... or... Okay, it's not that obvious. :)
I think that you will have future stacking and positioning problems if you actually force the child to sit behind the parent div like you want, and strongly suggest that you use a different dom structure. How about a head that contains hair and then a face. Then the face can contain eyes and ears and so forth and the positioning will all stack naturally in dom order?
.goals {
align-items: center;
background: #e3e3e3;
display: flex;
grid-row: 3/4;
height: 500px;
width: 100vw;
}
.circle {
display: table-cell;
/*vertical-align: middle;*/
background: #3c759a;
border-radius: 100%;
height: 300px;
overflow: hidden;
position: relative;
width: 300px;
}
.body {
background: #222;
border-radius: 35px;
height: 400px;
left: 75px;
position: relative;
top: 170px;
width: 150px;
}
.head {
background: #ffe4be;
border-radius: 20px;
height: 100px;
left: 100px;
position: absolute;
top: 80px;
width: 100px;
z-index: 1;
}
.hair-main {
background: #e7ab57;
border-radius: 34px 34px 0px 0px;
height: 70px;
left: 90px;
position: absolute;
top: 68px;
width: 120px;
}
<div class="goals">
<div class='circle'>
<div class='body'></div>
<div class="hair-main"></div>
<div class='head'></div>
</div>
</div>