ポジション：親エレメントがスティッキーではない間に、子エレメント上でスティッキーな動作をしますか？

Question

私は何かを達成しようとしています。 CSSのみのソリューションを探していますが、私はJSでこれを解決できると知っていますが、私はしたくありません。

は、次のペンを考えてみましょう： https://codepen.io/fchristant/pen/PjoKOq

第2のナビゲーションバー（暗い）は、下にスクロールすると、それはビューポートのトップに固執する、粘着性があります。最初のナビゲーションバー（光）は粘着性ではなく、単にスクロールします。

しかし、そのライトナビゲーションバーには、がである子要素が付いています。アイデアは親がスクロールしてもスクロールしますが、子はスティッキーで、2番目のナビゲーションバー（スティッキー）と効果的にブレンドされます。

ただし、これは機能しません。したがって、私の疑問は、貼り付いていない親の中に付箋のある子要素を持つことは可能ですか？

HTML：

<div class="site_header"> 
    Site header 
    <div class="site_header_child"> 
    sticky 
    </div> 
</div> 
<div class="site_nav"> 
    Site header 
</div> 

CSS：

.site_header { 
    display:flex; 
    position:relative; 
    width:100%; 
    padding:10px; 
    background:#eee; 
} 

.site_header_child { 
    border:1px solid red; 
    margin-left:auto; 
    position:sticky; 
    z-index:2; 
    top:0; 
    right:20px; 
} 

.site_nav { 
    display: block; 
    position:sticky; 
    padding:10px; 
    background:#333; 
    color:#fff; 
    position:sticky; 
    z-index:1; 
    top:0; 
} 

Answer 1

それは、このような場合には、粘着性を使用することはできません。他の手段でも同じ効果を得ることができます。あなたは単に "固定"ポジショニングを使うことができます。

.site_header_child {  
    position:fixed; 
    top:10px; 
    background:#eee; 
} 

デモ：https://codepen.io/anon/pen/VMWovv