固定位置元素的绝对定位子不滚动

Question

所以我有一个固定的位置元素。它有一个位置：静态的孩子。 position的子元素：static元素是position：fixed，并且不会与它的父元素一起滚动，表现得像一个固定的位置元素。有没有办法让孙元素滚动？我真的想避免指定position：relative。对解决方案的任何想法。我也想更好地理解这种行为。

<div class="fixed-parent">
<div>
    <div class="absolute-child">
        Test
    </div>
    <div class="some-stuff-to-make-it-tall">
        really tall
    </div>
</div>

.fixed-parent{
    width:500px;
    height:500px;
    border:1px solid #ccc;
}
.fixed-parent > div{
    height:500px;
    overflow-y:scroll;
}
.some-stuff-to-make-it-tall{
    margin-top:25px;
    height:600px;
}
.absolute-child{
    position:absolute;
}

https://jsfiddle.net/L5hscgu5/1/

Answer 1

现在.absolute-child相对于滚动div没有定位。将position: relative;添加到.fixed-parent > div可以完成我认为您要尝试的操作。

https://jsfiddle.net/L5hscgu5/4/

.fixed-parent > div{
    height:500px;
    overflow-y:scroll;
    position: relative;
}