根据孩子绝对div制作父div高度

Question

我想用一个小的偏移量一个在另一个上面的子 div 显示。下图说明了我的预期结果。

为了让子 div 一个在另一个上面有一个小的偏移，我将子 div 的位置设置为绝对，它可以工作。但是，这样做 parent2 隐藏了 parent1（请参阅代码段的结果）。这是由于位置绝对设置为子 div。

.main {
  position: absolute;
  z-index: 500;
  left: 56px;
  display: block;
}

.parent {
  position: relative;
  margin: 10px;
}

.parent>* {
  position: absolute;
}

.parent>*:nth-of-type(1) {
  z-index: 10;
}

.parent>*:nth-of-type(2) {
  transform: translateY(1.4rem) scale(.95);
  z-index: 9;
}

<div class="main">
  <div id="parent1" class="parent">
    <div class="child" style="background-color:blue;"><br>Child1</div>
    <div class="child" style="background-color:red;"><br><br><br>Child2</div>
  </div>
  <div id="parent2" class="parent">
    <div class="child" style="background-color:green;"><br>Child1</div>
    <div class="child" style="background-color:yellow;"><br>Child2</div>
  </div>
</div>

解决办法是给父div设置一个高度，但是子div的高度不总是一样的。 我找到了链接 issues，但我想避免使用 JS。

Answer 1

使用 display:grid 并将两个元素放在同一区域，您将获得没有 position:absolute 的重叠效果

.main {
  position: absolute;
  z-index: 500;
  left: 56px;
  display: block;
}

.parent {
  position: relative;
  margin: 10px;
  display:grid; /* here */
  align-items:start; /* disable stretch alignment */
}

.parent>* {
  grid-area:1/1; /* here */
}

.parent>*:nth-of-type(1) {
  z-index: 10;
}

.parent>*:nth-of-type(2) {
  margin-top:1.4rem; /* you can now use margin instead of translate */
  transform: scale(.95);
  z-index: 9;
}

<div class="main">
  <div id="parent1" class="parent">
    <div class="child" style="background-color:blue;"><br>Child1</div>
    <div class="child" style="background-color:red;"><br><br><br>Child2</div>
  </div>
  <div id="parent2" class="parent">
    <div class="child" style="background-color:green;"><br>Child1</div>
    <div class="child" style="background-color:yellow;"><br>Child2</div>
  </div>
</div>