web-dev-qa-db-ja.com

CSS：位置：相対div内の位置：絶対divが、コンテナ上の非表示：オーバーフローによって切り取られないようにする方法

divには3つのレベルがあります：

  • （下の緑色）トップレベルdiv with overflow: hidden。これは、ボックスのサイズを超える場合、そのボックス内のコンテンツ（ここには表示されていません）を切り抜くためです。
  • （下の赤）この中に、divとposition: relativeがあります。これの唯一の用途は、次のレベルのためです。
  • （下の青）最後にdivでposition: absoluteを使用してフローから外しますが、赤div（ページではなく）を基準にして配置したい）。

フローから青いボックスを取り出して、緑のボックスを超えて展開しますが、次のように赤いボックスに対して相対的に配置します。

ただし、以下のコードでは、次のようになります。

そして、赤いボックスのposition: relativeを削除すると、青いボックスは緑のボックスから出ることができますが、赤いボックスに対してはもう配置されません。

次の方法があります：

  • 緑色のボックスにoverflow: hiddenを保持します。
  • 青いボックスは緑のボックスを超えて拡大し、赤いボックスに対して相対的に配置されていますか？

テストのためのインラインCSSを備えた完全なソース：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <body>
        <br/><br/><br/>
        <div id="1" style="overflow: hidden; background: #efe; padding: 5px; width: 125px">
            <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
                <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
            </div>
        </div>
    </body>
</html>
cssoverflowpositionrelative
129
avernet

動作するトリックは、ボックス＃2をposition: absoluteではなくposition: relativeで配置することです。通常、position: relativeを持つ内側のボックス（ここではボックス＃3）を外側のボックスに対して配置する場合は、position: absoluteを外側のボックス（ここではボックス＃2）に配置します。ただし、ボックス＃3をボックス＃2に対して相対的に配置するには、ボックス＃2を配置するだけです。この変更により、以下が得られます。

そして、この変更の完全なコードは次のとおりです。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">

            /* Positioning */
            #box1 { overflow: hidden }
            #box2 { position: absolute }
            #box3 { position: absolute; top: 10px }

            /* Styling */
            #box1 { background: #efe; padding: 5px; width: 125px }
            #box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
            #box3 { background: #eef; padding: 2px; width: 75px; height: 150px }

        </style>
    </head>
    <body>
        <br/><br/><br/>
        <div id="box1">
            <div id="box2">
                <div id="box3"/>
            </div>
        </div>
    </body>
</html>

オーバーフローのあるボックス内の絶対位置のボックス：自動または非表示 にこれに関する詳細を追加しました。

48
avernet

オーバーフローした隠しコンテナの外に何かを表示する魔法の解決策はありません。

同様の効果は、現在の相対コンテナ内に親を配置することにより、親のサイズに一致する絶対配置divを持つことで達成できます（クリップしたくないdivはこのdivの外にある必要があります）。

#1 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

コンテンツをx軸でクリップする必要がある場合（divの幅を設定しただけなので、これはあなたのケースのように見えます）、overflow-x: hiddenを使用できることに注意してください。

5
vise

私はこれを現状のままで行う方法を本当に見当たらない。 overflow:hiddenをdiv＃1から削除し、div＃1内に別のdivを（つまりdiv＃2の兄弟として）追加して、未指定の「コンテンツ」を保持し、overflow:hiddenを追加する必要があると思います代わりに。私は、オーバーフローがオーバーライドされる可能性があるとは思わない（またはできるはずだ）。

0
graphicdivine

外側のdiv（緑色のボックス）内に表示されていない他のコンテンツがある場合、そのコンテンツを別のdiv内にラップしないで、それを"content"と呼びましょう。この新しい内部divでオーバーフローを非表示にしますが、緑色のボックスでオーバーフローが見えるようにします。

唯一の欠点は、コンテンツdivが赤いボックスの位置に干渉しないことを確認するために混乱する必要があることですが、それを少し頭痛で修正できるはずです。

<div id="1" background: #efe; padding: 5px; width: 125px">
    <div id="content" style="overflow: hidden;">
    </div>
    <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
        <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
    </div>
</div>
0
Anthony