无论如何，在position:relative的div之外获得position:absolute的div

Question

我有一个这样的结构：

<div class="a">
  <div class="b">
    <div>
      <div class="c">
      </div>
    </div>
  </div>
</div>

CSS：

.a { position:relative; }
.b { position:absolute; }

我知道，定义顶部和左侧/右侧属性会将绝对div定位到其具有position:relative的父级，或者如果不存在这样的父级则定位到浏览器窗口。我面临的问题是，我无法更改.a和.b的CSS。我需要.c位于.a之上，并稍微超出它。所以.a没有滚动条。

一些ASCII艺术来说明，我想：）

我有：

-------------------
|   .a           |^|
|                | |<-- Scroll bar
|   ------       | |
|   | .c |       |*|
-------------------

我需要：

--------------------
|   .a             |
|                  |<-- No scroll bar
|   ------         |
|   | .c |         |
----|    | ---------
    |    |
    ------

Answer 1

此解决方案将堆叠所有项目，<div class="c">将伸出其父容器：

.a {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid red;
  background: #eee;
}
        
.b {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 200px;
  border: 1px solid blue;
  background: #ccc;
}
        
.c {
  position: absolute;
  bottom: -50px;
  left: 20px;
  width: 100px;
  height: 100px;
  border: 1px solid orange;
  background: #aaa;
}

<div class="a">
  <div class="b">
    <div>
      CONTENT
      <div class="c"></div>
    </div>
  </div>
</div>

请注意只有当父容器具有overflow:visible时，此操作才会起作用。当父母中的一方患有overflow:hidden|scroll时，我想你无法解决这个问题。