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定位到其父级位置：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你无法解决这个问题时，我猜。

无论如何得到div与位置：绝对位于div之外的位置：相对？

1 个答案:

CSS

HTML