我遇到了一些非常奇怪的行为，并且在我测试的每个浏览器中都不一致。CSS：位置：固定在位置：绝对

我有一个相当复杂的布局，但主要的问题就出在这里：

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

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

正如我开始向下滚动浏览器会忽略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地图与position:fixed另一格，如果我删除层或至少将其更改为display:none那么这个奇怪的错误就会消失。

编辑

注意到了这个bug的存在时，如果我改变缩放级别来回，则位置自行调整至适当的行为。对我而言，这表示webkit问题无法在滚动中执行某些内部回调函数。

另一个非常奇怪的是，我有#header里面的几个链接，他们工作，如果我只是点击预期的位置，即使div没有出现在那里。总体来说我注意到它只是渲染已经坏了。如果在任何时候我强制浏览器通过调整窗口大小或改变缩放比例来重新渲染，或者只是选择全部，那么标题栏会跳转到正确的位置，但不会保持不变。

来源

2013-03-01 Mikhail

您是否在为固定元素设置位置值？即顶部：0;左侧：0; ？ – lukeocom 2013-03-01 08:26:06

是的，很抱歉没有提到它。我有'顶部：60px;'在固定的。将更新OP。 – Mikhail 2013-03-01 17:33:49

我以前没有遇到过这个问题，也不能重现它。http://jsfiddle.net/be53j/ – lukeocom 2013-03-05 02:07:13

-5

首先，把东西放在你的div中，因为空的东西真的很奇怪。那么，通过将fixed加入absolute，你期望什么？显然，没有人知道你的fixed div的参考点是什么。它应该成为其父母的地位吗？哪个不会随着滚动或页面位置的变化而改变？尝试使用完全有意义并且定义明确的事物，因为如果您使用chrome修复它，另一个浏览器会发生什么情况？你真的喜欢测试所有的人吗？

我想在你的div秒的微小变化，从而拉动fixed DIV出absolute一个或别的地方移动absolute股利。

来源

2013-03-01 08:28:45 Sheric

在OP中，我只显示了DOM，而不是内容。每个div中都有子标签和文本。 'fixed'不需要参考点。所有规范都声明它引用了浏览器窗口。下一次请在请求更多信息时使用评论而不是答案。 – Mikhail 2013-03-01 17:32:59

您必须将header放在父容器drop的外面才能使其正常工作。

我几天前有点类似的问题。举例来说，如果你设置的header的z-index，这将是实现的header父drop container.The的z-index的z-index的将是无用的，因为它已经具有另一个z-index的容器内。

z索引的同样的逻辑适用于位置。

来源

2013-03-06 12:16:40 Michel

它有点合理，但如果它和你说的一样准确，那么OpenLayers不会对此产生任何影响。如果我删除OpenLayers（它是所有div之外的），那么我的'header'按预期开始工作。 – Mikhail 2013-03-07 05:58:51

您在评论中提到的OpenLayers使用CSS变换。既然如此：

与固定定位的元素将成为相对于与该元素的变换 - 不相视

看一看规范：The Transform Rendering Model

指定比为“变换”属性 “无”以外的值，在它被施加到元件建立一个新的本地坐标系。

看这个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; 
}

来源

2013-12-29 21:46:20 Danield

你刚刚从可能的最糟糕的噩梦中救了我:)，我使用引导词缀，并且也使用父容器上的变换，我将摆脱变换并使用jquery动画:) – ndd 2015-04-09 14:54:40

感谢您的这一点，只是想补充一点'will-change：transform'会触发这种行为（在最新的chrome中） – schellmax 2016-09-06 13:05:06

我要添加另一种可能的解决方案，因为我是用镀铬忽略的位置挣扎：固定的相当长的一段时间，直到我终于发现罪魁祸首：

-webkit-perspective: 1000;

它来自我使用的插件，并导致所有位置：固定的元素被忽略。希望它可以帮助别人。

来源

2015-01-06 22:42:49 parliament

正如接受的答案所说，这是预期的行为，并符合规范。这个的另一个重要组成部分是使用CSS转换的意思。

在你的情况，这是由于OpenLayers，但这也适用于任何人使用will-change: transform以及（可能很多人访问此问题）。这已经在Chromium bug追踪器here上提出，并且标记为WontFix，因为（正如我所说）它是有意的行为。官方评论是这样的：

此行为是由规范（http://dev.w3.org/csswg/css-will-change/）必需的：“如果一个属性的任何非初始值将导致产生用于在固定位置的元素的含块的元件，指定将改变的属性必须使该元素为固定位置元素生成一个包含块。“

这个想法是，一旦指定了变换：你应该能够便宜地添加/移除/改变变换，而不需要固定位置的后代重新布局。

请注意，使用其他值will-change（例如opacity，top）将不会改变固定位置后代的位置。

据我所知，唯一的解决办法是让孩子will-change元素一个兄弟代替，防止属性的级联。

作为一个便笺，在我的具体情况下，我可以通过更具体的will-change属性来修复它。我不是在包含需要GPU卸载的性能震荡元素的div上使用它，而是直接在违规元素上使用它。这是由于我的原始错误代码，所以它不适用于大多数情况。

来源

2016-04-19 22:59:41 forresthopkinsa

CSS：位置：固定在位置：绝对

编辑

编辑

回答

相关问题