position：スティッキーは親から離れることはありません

Question

要素をスティッキーにすることができるので、ビューポートの上部に留まりますか？私はそれがコンテナを残しても要素が粘着性を残しておきたい。

は、私がここでの問題を説明するためのペンです。この

HTML

<div class="page"> 
    <div class="parent"> 
    <div class="child-sticky"> 
     <p>i want to be sticky, even when I'm outside my parent.</p> 
    </div> 
    </div> 
</div> 

CSS

.child-sticky { 
    position:sticky; 
    top:20px; 
} 

.page { 
    height: 3000px; 
} 

を試してみました。下にスクロールして、私が何を意味するかを見てください。

https://codepen.io/pwkip/pen/OxeMao

Answer 1

スティッキーがそのように動作しますが、それはその親にsticky相対ままになります。 fixedを使用する必要があります。 Check this codepen

Answer 2

これは、スティッキーが機能する方法です。親の外でも作業する必要がある場合は、HTML構造を変更する必要があります。

も公式の定義を参照してください：https://www.w3.org/TR/css-position-3/#sticky-pos