css - 画面全体ではなく、親に対して固定位置の要素を作成する方法は?

Question

ユーザーが下にスクロールすると、サイドバーの一部が固定位置になるという状況に遭遇しますが、位置をキャッチしてサイドバー要素に固定 css を適用すると、親 (サイドバー) だけでなく画面全体に固定されます。

これを正しく設定するにはどうすればよいですか？

Answer 1

最初にポジショニングを理解する：

固定ポジショニングOR[position：fixed]

固定位置の要素は、ブラウザウィンドウを基準にして配置されます。

相対ポジショニングOR[position：relative]

相対位置の要素は、通常の位置を基準にして配置されます。

絶対測位OR[position：absolute]

絶対位置要素は、静的以外の位置を持つ最初の親要素を基準にして配置されます。

だからあなたの場合、あなたの親divは持っているべきでありposition:relative、あなたの子供は代わりにdiv持っているべきですposition:absoluteposition:fixed

参照リンク

Answer 2

あなたの質問を読んで、私はあなたが次のようなものを持っていると思います：

 <div class="sidebar">
    <div class="fixed" style="position: fixed;"></div>
 </div>

残念ながら、おそらくご存知のように、top、left、rightまたはbottomは常にpositon: fixed要素のブラウザー ウィンドウに対して相対的に動作します。

解決策は、div を別の div でラップ.fixedし、必要なすべての配置を div ではなく同じラッパーで行うことです.fixed。実演してみましょう:

HTML:

<div class="sidebar">

    <div class="helper">
        <div class="fixed"></div>
    </div>

 </div>

CSS:

​.sidebar {
    position: relative;
}

.helper {
    position: absolute;
    top: XYZ; left: ZYX; /*where XYZ and ZYX would
                           be the values you were 
                           trying before to give to .fixed*/
}

.fixed {
    position: fixed;
}

このフィドルで実際にそれを見てください：http://jsfiddle.net/joplomacedo/T2PL5/

Answer 3

親position: relativeを作成すると、その子はそれをabsolute配置の参照として使用します。詳細については、CSS 2 仕様の「包含ブロック」の定義を参照してください。

配置についてfixed: 何かを固定 (つまり、ビューポートに固定) しながら、ビューポートに固定されていない他の要素との相対関係を維持するにはどうすればよいでしょうか? これは私には矛盾しているように思えます。それが、私が最初にあなたの質問を誤解した理由です。

Answer 4

このプラグインはまさにあなたが必要としているものです