html - 无论如何要获得具有位置的div：绝对在具有位置的div之外：相对？

Question

我有这样的结构：

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

CSS：

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

我知道定义 top 和 left/right 属性将绝对 div 定位到其具有 position:relative 的父级或浏览器窗口（如果这样的父级不存在）。我面临的问题是，我无法更改 .a 和 .b 的 CSS。而且我需要 .c 位于 .a 之上并稍微脱离它。所以 .a 没有滚动条。

一些 ASCII 艺术来说明，我猜 :)

我有：

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

我需要：

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

Answer 1

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

CSS

<style>

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

</style>

HTML

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

请注意，这仅在父容器具有overflow:visible. 我猜当其中一位父母有overflow:hidden|scroll你无法解决这个问题时。