2

私はこのような構造を持っています:

<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 |         |
----|    | ---------
    |    |
    ------
4

1 に答える 1

7

このソリューションは、すべてのアイテムをスタックし<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どちらかがこれを解決できない場合、私は推測します。

于 2012-07-30T22:51:02.483 に答える