我可以滚动 child 并忽略其固定的 parent 吗？

Question

我试图让固定元素的 child 忽略它的 parent 的 "fixed" 属性，而是随着页面滚动。到目前为止，这是我最好的尝试，但没有用...

CSS:

.main-background {
    position: fixed;
    top: 0;
    z-index: -1;
    background-image: url('');
}    
.header-image {
        position: absolute;
        z-index: 100;
    }

HTML:

<div class="main-background">
<img class="header-image"/>
</div>

为了让事情更清楚，我并没有试图给 child 额外的滚动条，我只是想让它随着页面滚动，就好像它位于 [=37] 之外一样=].

我预言有人会回答 "just take the child out of the parent"，但这并没有回答我的问题：我正在寻找一种方法来保持现有的 HTML 结构。

此外，我想保留 "position: fixed" 并避免使用 "background-position: fixed"，因为这个属性在移动设备上确实不一致。

也许这是不可能的，但非常感谢所有帮助！

Answer 1

看来您需要 javascript 才能完成您的要求。这是使用 jQuery.

的解决方案

$(window).scroll( function(){
    $('.header-image').css('top', -$(window).scrollTop() );
});

https://jsfiddle.net/1xba4dzf/

我可以滚动 child 并忽略其固定的 parent 吗？

Can I make a child scroll and ignore its fixed parent?

html

css

parent-child

fixed