固定定位框内的固定定位框滚动内容

Question

我有一个固定的div，它有一个可滚动的内容，在这个div中我想定义另一个固定的div，它不应该与父内容一起滚动。我怎么能用css做到这一点？

.fixed {
    position: fixed;
}
.parent {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}
.child {
    left: 200px;
    width: 100px;
    height: 100px;
    background-color: yellow;
}

<div class="parent fixed">
    <h1>Parent fixed</h1>
    <div class="child fixed">
    </div>
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        
    </ul>
    
</div>

http://jsfiddle.net/bbvarga/chqe7omb/

我希望黄色div应该固定在浏览器窗口，而不管滚动位置如何。

我可以阅读许多地方，固定定位意味着相对于浏览器窗口，但事实并非如此，因为如果我滚动父div，固定子项的位置将会不同。

我知道如果我制作了两个固定的兄弟姐妹，而不是它的工作原因，那么问题是，如果两者固定在亲子关系中，我该怎样才能使它工作。

更新

我在Mac OSX Yosemite 10.10 Chrome 42上，这是我在滚动时看到的动画gif：

不知道该说什么，我很伤心。

Answer 1

原来这是Chrome中的一个错误，请参阅此处的详细信息：

https://code.google.com/p/chromium/issues/detail?id=490141