html - 无论如何要获得位置为 :absolute outside of div with position:relative? 的 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 时才有效.当 parent 之一有overflow:hidden|scroll我猜你无法解决这个问题。