CSS：position：fixed位置：absolute

我遇到了一些非常奇怪的行为，并且在我测试过的每个浏览器中都不一致。

我有一个非常复杂的布局，但主要的问题在于：

<div id="drop">
  <div id="header"></div>
</div>

#drop有position：absolute和z-index：100
#header有位置：固定;顶部：60像素;

当我开始向下滚动Chrome时，会忽略位置：固定规则。如果我从#drop中删除上述两种风格之一，则Chrome开始尊重位置：固定规则。

无法让它在Ubuntu Chrome 23.0.1271.97上工作，并在Mac Chrome 25.0.1364.99上看到相同的行为。我的朋友使用Ubuntu Chrome 25.0.1364.68测试版，它可以正常工作。我已经在firefox测试了它，它有点工作(与其他症状)

有人听说过这个错误吗？还是有人甚至可以重现？

编辑

我正在使用openlayers地图作为另一个div与位置：如果我删除那个图层或修改，至少改变它显示：没有，那么这个奇怪的bug消失了。

编辑

注意到在这个bug的存在期间，如果我来回改变缩放级别，那么这个位置就会自己调整到适当的行为。对我来说，这表示一个webkit问题，在滚动时无法执行一些内部的回调函数。

另一个非常奇怪的事情是，我在#header里面有几个链接，如果我只是点击预期的位置，即使div没有出现，他们也可以工作。总的来说，我注意到这只是渲染的破坏。如果在任何时间点，我强制浏览器通过调整窗口大小或更改缩放比例来重新渲染，或者只是选择全部，然后标题栏跳到正确的位置，但不会保持固定。

解决方法

您在评论中提到OpenLayers使用CSS转换。就这样

具有固定定位的元素将变得相对于具有变换的元素 – 而不是相对于视口

看看规格：The Transform Rendering Model

Specifying a value other than ‘none’ for the ‘transform’ property
establishes a new local coordinate system at the element that it is
applied to.

看看这个FIDDLE在一个webkit浏览器看到这个在行动

<div class="wpr">
    <div class="fixed"></div>
</div>

.wpr
{
    width: 200px;
    height:1000px;
    background: pink;
    position:relative;
    margin: 0 200px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.fixed
{
    width: 200px;
    height:200px;
    margin: 50px;
    position: fixed;    
    top:0;
    left:0;
    background: aqua;
}