CSS: Как иметь position:absolute отделение в position:relative отделении не быть обрезанным overflow:hidden на контейнере

У меня есть 3 уровня div:

• (В зеленом ниже) верхний уровень div с overflow: hidden. Это вызвано тем, что я хочу некоторое содержание (не показанный здесь) в том поле к обрезанному, если оно превышает размер поля.
• (В красном ниже) В этом я имею div с position: relative. Единственное использование для этого для следующего уровня.
• (В синем ниже) Наконец a div Я вынимаю из потока с position: absolute но это я хочу расположенный относительно красного div (не к странице).

Я хотел бы иметь синее поле быть вынутым из потока и расширился бы вне зеленого поля, но был бы расположен относительно красного поля как в:

Однако с кодом ниже, я добираюсь:

И удаление position: relative на красном поле теперь синему полю позволяют выйти из зеленого поля, но больше не располагают относительно красного поля:

Есть ли путь к:

• Сохраните overflow: hidden на зеленом поле.
• Имеет синее поле, расширяются вне зеленого поля и быть расположенным относительно красного поля?

Полный источник:

#d1 {
  overflow: hidden;
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}

<br/><br/><br/>
<div id="d1" >
  <div id="d2" >
    <div id="d3"></div>
  </div>
</div>