153

私は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>

4

4 に答える 4

52

うまくいく秘訣は、ボックス＃2を。position: absoluteの代わりに配置することですposition: relative。position: relative内側のボックス（ここではボックス＃3）を外側のボックスに対して相対的に配置する場合は、通常、外側のボックス（ここではボックス＃2）にをposition: absolute配置します。ただし、覚えておいてください。ボックス＃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>
于 2010-02-11T18:33:10.587 に答える
6

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

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

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

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

于 2010-02-11T09:19:29.380 に答える
0

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

于 2010-02-11T09:14:24.640 に答える
0

外側の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>
于 2010-02-11T09:21:41.700 に答える