CSS:position:fixed of position:absolute

Question

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

我的布局非常复杂,但主要问题在于:

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

#drop有position:absolute和z-index:100
#header有position:fixed; top:60px;

当我开始向下滚动时,Chrome会忽略该position:fixed规则.如果我从上面删除上述两种样式中的任何一种,#drop则Chrome开始position:fixed遵守该规则.

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

有没有人听说过这个错误？或者任何人都可以重现它？

编辑

我正在使用openlayers map作为另一个div,position:fixed如果我删除该层或者至少将其更改为display:none那么这个奇怪的bug就会消失.

编辑

注意到在出现此错误时,如果我来回更改缩放级别,则位置会自行调整为正确的行为.对我来说,这表明webkit问题无法在滚动上执行某些内部回调函数.

另一个非常奇怪的事情是,我内部有一些链接,#header如果我只是点击预期的位置它们工作,即使div没有出现在那里.总的来说,我注意到只有渲染被打破了.如果在任何时候我强制浏览器通过调整窗口大小,或更改缩放,或只是选择全部来重新渲染,那么标题栏会跳转到正确的位置,但不会保持固定.

Answer 1

您在评论中提到OpenLayers使用CSS转换.既然如此:

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

看看规范:变换渲染模型

为'transform'属性指定"none"以外的值会在应用它的元素处建立新的局部坐标系.

看看这个FIDDLE在WebKit浏览器看到这个在行动

.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;
}

Answer 2

首先，在你的里面放一些东西，div因为空的东西表现得很奇怪。fixed那么，将 a 放入an中你期望得到什么absolute？显然，没有人知道你的 div 的参考点是什么fixed。应该是它父母的立场吗？哪个不随滚动而变化，或者页面位置发生变化？尝试使用完全有意义且有明确定义的东西，因为如果你在 Chrome 中修复它，那么在其他浏览器中会发生什么？您真的喜欢对所有这些进行测试吗？

我想你的 s 需要做一点小小的改变，div以便将fixeddiv 从其中拉出absolute或将absolutediv 移到其他地方。