CSSレイアウト：スティッキーポジショニング

所定の位置まで、「ノーマル」、文書の流れと動きでそれをしてから、そこに「立ち往生」;場合、または、それは彼らが「通常の」文書フローに従い、スティッキー位置から外れ、決定的ので残すことができることを発見した場合：スティックの位置ではあったようにドキュメントフローに参加。

効果のコードは以下のように：

< divの   スタイル= "高さ：200pxの、オーバーフロー：スクロール;" > 
    < p個のスタイル= "背景色：lightgrey;位置：スティッキー;上部：0PX;" >これは、ヘッダAである</ P > 
    < P >これは、コンテンツAれる</ P > 
    < P >これは、コンテンツAれる</ P > 
    < P >これは、コンテンツAれる</ P > 
    < P >これはコンテンツAです< / P > 

    < Pのスタイル= "背景色：lightgrey;位置：スティッキー;上部：0PX;" >このヘッダBである</ P > 
    < P >これは、コンテンツB </ P > 
    < P >これはコンテンツBである</ P > 
    < P >これはコンテンツBである</ P > 
    < P >これは、コンテンツBです< / P > 
    
    < P スタイル= "背景色：lightgrey;位置：スティッキー;上部：0PX;" >これは、ヘッダC </ P >
    >これは、コンテンツCれる</ P > 
    < P >これは、コンテンツCれる</ P > 
    < P >これは、コンテンツCれる</ P > 
    < P >これは、コンテンツCである</ P > 

    < P スタイル= "背景色：lightgrey;位置：スティッキー;トップ：0PX;」>これは、ヘッダD </ P > 
    < P >これはコンテンツDである</ P > 
    < P >> 
    < P >これはコンテンツDである</ P > 
    < P >これはコンテンツDである</ P > 

</ DIV >

タイトル行は、背景色を設定します。背景色（背景透明）に設定されていない場合は、テキストとテキストのタイトル行が正しく表示されたドキュメントフローの重複になります。

粘着性の位置付け要素は、「通常の」文書の流れから転がりカバーします。オーバーライド先に粘着性の要素の後ろに粘着性の要素、付箋紙の層のように。

これは、ヘッダAであります

これは、コンテンツAであります

これは、ヘッダBであります

これは、コンテンツBであります

これはヘッダCであります

これは、コンテンツCです

これは、ヘッダDであります

これは、コンテンツDです

CSSレイアウト：スティッキーポジショニング

おすすめ