CSS：position：absolute divをposition：relative div内でコンテナのオーバーフロー：hiddenでトリミングしないようにする方法

143

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

（緑色以下）トップレベルdivを有しますoverflow: hidden。これは、ボックスのサイズを超える場合、そのボックス内の一部のコンテンツ（ここには表示されていません）をトリミングしたいためです。
（中には、下記赤）、この内部では、私が持っているdivとposition: relative。これは、次のレベルでのみ使用できます。
（下の青で）最後divに、フローから取り出しましたが、ページに対してではなくposition: absolute、赤に対して配置したいと思いdivます。

青いボックスを流れから外して、緑のボックスを超えて拡張させたいのですが、次のように赤いボックスに対して相対的に配置します。

しかし、以下のコードで、私は得ます：

そしてposition: relative、赤いボックスのを削除すると、青いボックスが緑のボックスから出ることが許可されますが、赤いボックスに対して相対的に配置されなくなります。

方法はありますか：

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

完全なソース：

#d1 {
  overflow: hidden;
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}

<br/><br/><br/>
<div id="d1" >
  <div id="d2" >
    <div id="d3"></div>
  </div>
</div>

スニペットを展開

css overflow css-position

— Avernet
ソース

44

適切にフォーマットされた質問とソースコードの+1

— graphicdivine 2010

明確化：それで、青いボックス（最も内側のdiv）が緑のボックス（最も外側のdiv）からオーバーフローできるようにしたいが、緑のボックスではオーバーフローを隠したままにしますか？つまり、基本的に、青いボックスを除いて、緑のボックスのすべてにオーバーフローが隠されていますか？

— Anthony、

アンソニー、はい、これはまさにそれです。そして、赤いボックス（＃2）がどうなるかは気にしません。赤いボックス（＃2）の上部/右側に影響を与えるためだけにあります。

— avernet 2010

2

+1は、私が説明するのは難しすぎると思ったが、本当に答えが欲しかった質問を適切に説明するためのものです。

— Andrew Mao

position: fixedoverflow:hidden含む要素のを無視します。

— Kevin Beal

48

機能するトリックは、position: absoluteではなくでボックス＃2を配置することですposition: relative。position: relative外側のボックスposition: absoluteに対して相対的に配置される内側のボックス（ここではボックス＃3）が必要な場合は、通常、外側のボックス（ここではボックス＃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>

— Avernet
ソース

5

私は実際に使用しposition: static、それが私にとってよりうまくいった

— Jason

@ジェイソン、非常に興味深い。つまりposition: static、ボックス＃2の代わりにを使用すると言っていますposition: absolute。

— avernet 2010年

1

absoluteクリップしないのに、なぜクリップするのか詳しく説明できますrelativeか？

— Andrew Mao

1

このソリューションは、＃1と＃3の間のすべてを絶対的なものにしない限り機能しません。実際には、これは不可能です。

— windmaomao 2017年

1

そのような色を使用して視覚的に何かを説明する目的は何であるか

— 疑問に思い

5

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

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

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

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

— 万力
ソース

0

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

— グラフィック
ソース

0

outer-div（緑色のボックス）内に表示されていない他のコンテンツがある場合は、そのコンテンツを別のdiv内にラップしないでください"content"。それを呼び出しましょう。この新しいinner-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>

— アンソニー
ソース