14

Overflow-y:scroll を使用して div 内に固定位置の div を配置したい。つまり、残りのコンテンツが正常にスクロールしている間、div を所定の位置に保持したい。そして、私は何が間違っているのか理解できません。誰か助けてもらえますか? 前もって感謝します...

.foo {
    position:relative;
    display:block;
    width:100%;
    height:300px;
    overflow-y:scroll;
}
.bar {
    position:fixed;
    top:0;
    right:0;
}

そして、ここにHTMLがあります

<div class="foo">
    <div class="bar"><div><!-- end of div that should be fixed -->
    <div class="someOther">...</div>
    <div class="someOther">...</div>
    <div class="someOther">...</div>
    <div class="someOther">...</div>
</div><!-- end of container -->
4

2 に答える 2

23

要素に適用position:fixedすると、親要素ではなく、ウィンドウ自体に関連して配置されます。親が既定position:absoluteの位置以外の位置にある限り、親に対して子を配置するためにを使用します。position:static

例で正しく行ったようposition:relativeに、親.fooに適用position:absoluteしてから子に適用します.bar。通常、これは親の上部にスナップするという望ましい結果を達成します.barが、親 div に子コンテンツのオーバーフローがあり、すべての子コンテンツをoverflow-y:scrollスクロールするため、同様にスクロールする必要があります。ここで私の Fiddleの一番上の例を参照してください。.bar

これを修正するには、スクロールしたいコンテンツを on で別のコンテナにラップし、overflow-y:scrollon を削除overflow-y:scrollしてスクロール.fooを防ぎ.barます。

適応できる実際の例を確認するには、私の Fiddle hereの一番下の例を参照してください。

于 2013-04-26T23:49:13.737 に答える