CSS:どのように位置:絶対本部内の位置を相対divい切って使えるオーバーフロー:隠れているコンテナ

StackOverflow https://stackoverflow.com/questions/2243245

  •  19-09-2019
  •  | 
  •  

質問

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

役に立ちましたか？

解決

フィットする位置するのがボックス#2 position: absolute の代わりに position: relative.いけ position: relative 外箱（ボックス#2)したい場合は、内側のボックス(このボックス#3） 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>

私は追加の詳細について 絶対位置付けボックス内のボックスオーバーフロー:オート隠し.

他のヒント

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

同様の効果があなたの現在の相対的なコンテナ（あなたはこのdivの外にあるべきクリップしたくないのdiv）の内側にそれを配置することによって、その親のサイズと一致して、絶対位置のdivを有することによって達成することができます> 
#1 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

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

私は本当に-あるとしてこれを行う方法が表示されません。私はあなたがのdiv＃1からoverflow:hiddenを削除し、不特定多数のコンテンツ」を開催し、その代わりにoverflow:hiddenを追加する（2＃をDIVする兄弟としてすなわち）のdiv＃1内の別のdivを追加する必要があるかもしれないと思います。私が乗っ過そのオーバーフローが可能とは思わない（またはすることができなければならない）。

その内容は別の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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top