css粘性位置決めposition:stickyピット回避の概要

前言:position:stickyは新しいcss 3属性で、position:relativeとposition:fixedの合体のように表現され、ターゲット領域が画面に表示されるとposition:relativeのように動作します.ページスクロールがターゲット領域を超えた場合、position:fixedのようにターゲット位置に固定されます.
現在の背景:現在はプライベート接頭辞～ブラウザの互換性も必要です.
これは新しい属性なので、今まで規範が一つもなかったが、W 3 Cも議論を始めたばかりで、今ではwebkit nightlyバージョンとchrome開発版(Chrome 23.0.1247.0+Canary)だけがサポートを開始している.
また、leftとright値を同時に定義すると、leftが有効になり、rightが無効になります.同様に、topとbottomが同時に定義され、topが有効になります.
次の操作を行います.

.sticky { 
position: -webkit-sticky; position:sticky; top: 15px; 

注意:ここに穴があります

親要素は、overflow:hiddenまたはoverflow:autoプロパティではありません.

top、bottom、left、rightの4つの値の1つを指定する必要があります.そうしないと、相対的な位置決め

にのみなります.

親要素の高さはsticky要素の高さ

を下回ってはならない.

sticky要素は、親要素内でのみ有効です.