Показать абсолютный div поверх div "grand-parent"

Question

Как отобразить дочерний элемент поверх его контейнера «grand-parent», зная, что grand-parent - overflow: auto.

.child {
  position: absolute;
  height: 200px;
  width: 150px;
  border: black solid 1px;
  background-color: pink;
  top: 10px;
  right: 0;
}

.parent {
  position: relative;
  height: 80px;
  border: black solid 1px;
  background-color: green;
}

.grand {
  position: relative;
  background-color: blue solid 2px;
  height: 80px;
  background-color: gray;
  overflow: auto;
}

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

Как отобразить дочерний контейнер поверх parent и grand-parent (без изменения свойства переполнения для grand-parent)?

Желаемый результат

Answer 1

Кажется невозможным увидеть элемент child, пока он grandparent имеет overflow: auto, поскольку при попытке сделать прокрутку grandparent child становится содержанием
grandparent ' прокручиваемая область.

Но это можно сделать, если мы обернем grandparent с помощью grand-grand-parent и расположим дочерний элемент в его отношении.

Вот что я сделал:

.parent {
  height: 180px;
  border: black solid 1px;
  background-color: green;
}

.child {
  position: absolute;
  height: 200px;
  width: 150px;
  border: black solid 1px;
  background-color: pink;
  top:  32px;
  right: -24px;
}

.grand {
  height: 80px;
  background-color: gray;
  overflow:  auto;
}

.grand-grand-parent{
  position: relative;
  margin: 100px 100px;

<div class="grand-grand-parent">
  <div class="grand">
      <div class="parent">
          <div class="child"></div>
      </div>
  </div>
</div>

Answer 2

вы можете дать своему прародителю position: relative; и своему внуку - position: absolute; bottom: -20px; right: -20px;