34

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

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

<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 beta，它对他来说可以正常工作。我已经在 Firefox 上对其进行了测试，它有点工作（有其他症状）

有人听说过这个错误吗？或者任何人都可以复制它吗？

编辑

我将 openlayers 地图用作另一个 div，position:fixed如果我删除该图层或至少将其更改为，display:none那么这个奇怪的错误就会消失。

编辑

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

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

4

7 回答 7

39

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

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

看一下规范：Transform Rendering Model

为 'transform' 属性指定除 'none' 以外的值会在其应用到的元素处建立一个新的局部坐标系。 

.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;
}
<div class="wpr">
    <div class="fixed"></div>
</div>

于 2013-12-29T21:46:20.453 回答
4

正如公认的答案所说，这是预期的行为，并且符合规范。另一个重要的组成部分是使用 CSS 转换意味着什么。

在您的情况下，这是由于 OpenLayers 造成的，但这也适用于任何使用will-change: transform的人（可能很多人访问这个问题）。这已经在 Chromium bug tracker here上提出，并标记为WontFix，因为（正如我所说）这是预期的行为。官方评论是这样的：

规范要求此行为（http://dev.w3.org/csswg/css-will-change/）：“如果属性的任何非初始值会导致元素生成包含块的固定-位置元素，在 will-change 中指定该属性必须使元素为固定位置元素生成包含块。”

这个想法是，一旦指定了 will-change:transform，您应该能够廉价地添加/删除/更改转换，而无需重新布局固定位置的后代。

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

据我所知，唯一的解决方案是将元素的子will-change元素改为兄弟元素，以防止属性级联。

作为旁注，在我的具体情况下，我能够通过更具体的will-change属性来修复它。我没有在div包含需要 GPU 卸载的性能影响元素上使用它，而是直接在有问题的元素上使用它。不过，这是由于我原来的错误代码造成的，因此它不适用于大多数情况。

于 2016-04-19T22:59:41.350 回答
1

您必须将其放置header在父容器之外drop才能使其工作。

几天前我遇到了一些类似的问题。例如，如果您设置 z-index header，它将获得父drop容器的 z-index 。z-indexheader将无用，因为它已经在另一个容器中z-索引。

z-index 的相同逻辑适用于位置。

于 2013-03-06T12:16:40.757 回答
0

我想添加另一个可能的解决方案，因为我一直在为 chrome 忽略位置而苦苦挣扎：修复了很长一段时间，直到我终于找到了罪魁祸首：

-webkit-perspective: 1000;

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

于 2015-01-06T22:42:49.613 回答
0

将此添加到父级：

position: fixed;

......这给孩子：

position: sticky;
于 2021-06-21T12:39:48.570 回答
0

我认为这是不可能的，我不认为如果两个位置可以放在同一个地方而没有一个倒塌。但我认为在javascript中使用Avail高度更好，我的意思是如果你想要一个外部div来容纳内部div，并且外部div必须覆盖整个屏幕，在js中使用Availheight，这将获得屏幕高度然后应用如果，此后将所有div设置在固定位置。

于 2020-11-29T13:31:51.983 回答
-6

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

我想你的 s 有一个小的变化，div以便将fixeddiv 从absolute其中拉出或将absolutediv 移动到其他地方。

于 2013-03-01T08:28:45.717 回答