html - div 不会落后于 parent

Question

我试过使用 z-index 和 position，但我无法让 hair-main div 堆叠在 head div 后面。显然，我希望子 div 位于父 div 的后面。

.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

“显然，我希望子 div 位于父 div 后面”的陈述与 html 的工作方式相反(*有时)。显然，子元素位于父元素内的父元素之上，除非由 z-index 重新排序，除非任何 -1 z-index 技巧......或 javascript 操作......或者......好吧，它是没那么明显。 :)

我认为如果你真的像你想要的那样强制 child 坐在父 div 后面，你将有 future 的堆叠和定位问题，并强烈建议你使用不同的 dom 结构。包含头发然后是脸的头部怎么样。那么面部可以包含眼睛和耳朵等等，定位将全部按 dom 顺序自然堆叠？

.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>