div 不会落后于父级

Question

我尝试过使用z-index 和position，但我无法让hair-main div 堆叠在head 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 坐在父级后面”的说法与 html 的工作方式背道而驰（*有时）。显然，子元素位于父元素中的父元素之上，除非通过 z-index 重新排序，除非任何 -1 z-index 技巧......或 javascript 操作......或者......好吧，它是不是那么明显。 :)

我认为如果你真的像你想要的那样强迫孩子坐在父div后面，我认为你将来会有堆叠和定位问题，并强烈建议你使用不同的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>