css - 相对位置和溢出自动

Question

我有溢出问题:自动和相对位置？我的代码示例是:

div {
  border: 3px dashed #ccc;
  padding: 20px;
}

div::before { content: attr(class); }

.grandparent { overflow: auto; }
.parent { position: relative; }
.child { position: absolute; height: 60px; background: black; color: white; }

<div class="grandparent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

我想要 div.child过去 div.grandparent但因为 div.parent和他的 position: relative导致溢出。
请注意，我需要在 .parent 内绝对定位元素- 位置相对于 .parent - (这就是为什么我需要 position: relative 在这里)，我还需要一个可滚动的 .grandparent .
预期结果:

Answer 1

div, div.child::after {
  border: 3px dashed #ccc;
  padding: 20px;
}

div::before { content: attr(class); }

.grandparent { overflow: auto; }
.parent { position: relative;}
.child::before{ content: " " }
.child {position: relative; overflow: auto; }
.child::after {content: attr(class); position: absolute; height: 60px; background: black; color: white;
}

<div class="grandparent">
  <div class="parent">
    <div class="child"></div>   
  </div>
</div>

这是你的答案，但似乎不切实际
因为在现实中是不能这样实现的
请清楚地提出您的问题或更实际的例子