div won't lay behind parent

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>

Possible duplicate of [How to get a parent element to appear above child](https://stackoverflow.com/questions/1806421/how-to-get-a-parent-element-to-appear-above-child) — flx, Jan 26 '18 at 05:55

score 3 · Accepted Answer · answered Jan 26 '18 at 06:03

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>

I like the simplicity. I just moved the hair outside of the head div and it seems to work. — HJW, Jan 26 '18 at 06:17

div won't lay behind parent

1 Answers1