相对位置和溢出自动

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>

这是你的答案，但它似乎不切实际， 因为实际上它不能以这种方式实现

请清楚地提出您的问题或用更实际的例子