Question

我尝试使用UPDATE table1 SET id = table2.id WHERE st_intersects(table1.point_coord , table2.region )和z-index，但我无法将position div放在hair-main div后面。显然我希望孩子div坐在父母身后。

head

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

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>

div不会落后于父母

1 个答案: