我可以让子滚动并忽略其固定父级吗？

我试图使固定元素的子元素忽略其父元素的“固定”属性，而是随页面滚动。到目前为止，这是我最好的尝试，但不起作用......

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>

为了让事情更清楚，我并不是想给子级提供额外的滚动条，我只是想让它随着页面滚动，就好像它位于父级之外一样。

我预言有人会回答“只需将孩子从父母中取出”，但这并不能回答我的问题：我正在寻找一种保留现有 HTML 结构的方法。

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

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

看来您需要一些 javascript 才能完成您所要求的操作。这是使用 jQuery 的解决方案。

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

https://jsfiddle.net/1xba4dzf/ https://jsfiddle.net/1xba4dzf/