相关疑难解决方法(0)

我有3个级别div:

• (在下面绿色)的顶层div与overflow: hidden.这是因为如果超过框的大小,我希望在该框内部的一些内容(此处未显示)被裁剪.
• (在下面红色的)这里面,我也div有position: relative.唯一的用途是下一级别.
• (下面的蓝色)最后一个div我取出了流程,position: absolute但我想要相对于红色div(而不是页面)定位.

我想将蓝色框从流中取出并扩展到绿色框之外,但相对于红色框定位如下:

但是,通过下面的代码,我得到:

然后移除position: relative红色框,现在蓝色框允许离开绿色框,但相对于红色框不再定位:

有办法:

• 保持overflow: hidden在绿色框上.
• 蓝色框是否扩展到绿色框之外并相对于红色框定位？

完整的源代码,为了测试而使用内联CSS:

#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;
}