位置：粘性行为对孩子元素，而父母不粘？

我正在努力实现一些我不确定应该可能的事情。请注意，我正在寻找一个纯CSS解决方案，我知道我可以用JS解决这个问题，但我不想。位置：粘性行为对孩子元素，而父母不粘？

考虑以下笔： https://codepen.io/fchristant/pen/PjoKOq

第二导航栏（黑）是粘性的，当你向下滚动，它会坚持到视口的顶部。第一个导航栏（光）不粘，它会简单地滚动。

但是，该光导航栏有一个子元素，是粘性。这个想法是，父母将滚动，但孩子坚持，有效地与第二个导航栏（这是粘滞）混合。

但这并不奏效。因此我的问题是：是否有可能在粘性不粘的父级内有一个粘性子元素？

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; 
}

来源

2017-06-03 Ferdy

这是不可能在这种情况下使用粘性。但是，通过其他方式也可以达到同样的效果。你可以简单地使用“固定”定位，粘性小孩将保持原样。

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

演示：https://codepen.io/anon/pen/VMWovv

来源

2017-09-30 15:34:47

位置：粘性行为对孩子元素，而父母不粘？

回答

相关问题