2011-09-28 16 views
7

私はオーバフローオートで絶対配置divを持っています。このdivの中にもう1つ絶対配置されたdivがあります。私の問題は、この子divがオーバーフローのために切断されるということです。オーバーフローが設定されていない場合、コンテナdivからエスケープしたいと思います。私はzインデックスを設定しようとしましたが、それは役に立ちません。私に何ができる?オーバフローオートで絶対配置されたdivは、子絶対divを切り捨てるようにします。

HTML

<div class="parent"> 
    <div class="child"></div> 
</div> 

CSS

.parent { 
    position:absolute; 
    z-index:0 
    overflow:auto; 

    width:400px; 
    height:400px; 

    border:1px solid #000; 
} 

.child { 
    poisiton:absolute; 
    z-index:1 

    width:300px; 
    height:450px; 

    border:1px solid #f00; 
} 
+1

あなたの他の解決策は、それが切断されませんので、その容器の外側のdivを取り、彼らに新しいコンテナの両方の内部を置くことです+1。 [jsfiddle](http://jsfiddle.net)は人気があります。 – Alex

+1

私はそうしました。ご覧のように、子divは親から出てこない。 – user969622

+1

なぜあなたは 'overflow:auto'を使ってスクロールしたくないのですか? – Jacob

答えて

1

あなたには、いくつかの要素が親をオーバーフローさせないようにいくつかの要素ではないしたい場合は、現在の子を配置したほうが良いと思います現在の親の外側のdiv。ちょうどそれを絶対的に位置づけられた同輩にしてください。

+0

どうすれば親div内の参照ポイントから表示させることができますか?例えば、それが親divの内側でテキストの隣にあった場合、そのテキストの隣にポップアップが表示されますが、divを親divの外側に移動すると、その子要素の場合はそのテキストの隣にポップアップが表示されますもはやそれの隣にはありませんか? – user969622

+0

コンテンツの残りの部分をスクロールしてポップアウトしたいという意味ですか?私はあなたがその効果を達成するにはJavaScriptが必要だと思います。 – Jacob

+0

jQueryを使いこなす場合は、消費できるスクロールのイベントがあります。スクロール位置を計算し、それに応じて2番目のdivを移動する必要があります。 http://api.jquery.com/scroll/を参照してください。 – Jacob

2

フロートをクリアする別の方法に頼ることができるかどうかを参照してください。 CSSをoverflow: visibleに変更することは間違いなく良い解決策です。

<div class="container"> 
    <div class="parent"> 
    </div> 
    <div class="child"> 
    </div> 
</div> 

CSS:

.container { 
    /* apply positioning from .parent */ 
} 
.parent { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.child { 
    /* apply positioning from .child */ 
} 
関連する問題