固定位置不起作用就像绝对一样工作[关闭]

Posted 2023-03-12

【中文标题】固定位置不起作用就像绝对一样工作[关闭]

【英文标题】：Position fixed not working is working like absolute [closed]

【发布时间】：2016-04-26 04:48:46

【问题描述】：

我的问题很简单。我正在处理移动版本的页面，我们希望将“snag it”黄色按钮固定在底部，但位置固定不起作用，它像绝对位置一样工作，我不知道为什么。

我正在工作的页面：https://www.thechivery.com/products/everything-is-j-ok-tee

谢谢， 路易斯

【问题讨论】：

在.content-container 类上使用-webkit-transform:translate3d(0,0,0) 会抛出fixed 定位上下文，并且定位相对于声明转换的类而不是视口。见this SO answer。删除该规则，您的固定元素将正常工作。

这是一个超级简单的小提琴，演示了转换如何破坏fixed 定位：jsfiddle.net/p7oy6fL4

嘿伙计，这正是你说的！你不想回答，所以我可以选择你的答案吗？谢谢！

在父元素上添加 'filter' 属性也会导致这种情况。

【参考方案1】：

这里的问题在于您的 .content-container 包装类，它的 CSS 声明为 webkit-transform: translate3d(0,0,0)。转换声明，如this answer illustrates，将定位上下文从视口更改为旋转元素，这实质上意味着您的fixed 元素的行为就像它是绝对定位的一样。这是一个示例，显示了转换后的div 内的固定元素与div 之外的固定元素之间的区别。

.rotate 
  transform: rotate(30deg);
  background: blue;
  width: 300px;
  height: 300px;
  margin: 0 auto;

.fixed 
  position: fixed;
  background: red;
  padding: 10px;
  color: white;
  top: 50px;

<div class="rotate">
  <div class="fixed"> I am fixed inside a rotated div.</div>
</div>
<div class="fixed"> I am fixed outside a rotated div.</div>

为了让一切正常工作，您需要从 .content-container 中删除 transform3d 声明。

【讨论】：

只是想补充一点，“透视”属性也会触发这个错误。如果您将来遇到此问题，最简单的诊断方法是将元素向上拖过它的每个祖先，直到它开始表现 - 然后在有问题的元素上查找可疑属性。

谢谢！我不知道这是什么东西......多么奇怪。

如果我们不应用那个css，那么元素就会消失并再次出现。如何在不遇到此问题的情况下避免这种情况？ ***.com/questions/9807620/…

will-change 似乎具有与更改上下文相同的效果。

@DanEastwell 正确，will-change 创建 a stacking context 就像 transform 一样。

【参考方案2】：

对于任何想知道这是否是浏览器错误的人。显然不是，它遵循当前的 W3C 规范。奇怪的是，起初浏览器之间只是不一致（在某些情况下它按预期工作），然后它们都开始遵循违反直觉的 W3C 规则。如果这实际上是预期的逻辑，某些实现问题的副作用或只是愚蠢的遗漏，似乎没有明确的解释。

此外，position: fixed 不仅被 transform 破坏，还被 filter 和 perspective 属性破坏，如 here 所述。

请参阅：https://www.w3.org/TR/css-transforms-1/#propdef-transform 和 https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328 和 https://github.com/w3c/csswg-drafts/issues/913 了解有关此问题的更多信息。

【讨论】：

只是想添加：backdrop-filter 祖先的属性也会弄乱position: fixed

对我来说也是背景滤镜

【参考方案3】：

在我的情况下，问题是由父级上的 transform 与 overflow: auto; 混合引起的。

我创建了一个新的子元素，并在其上移动了 overflow 属性。

分离这两个属性解决了这个问题。

【参考方案4】：

这是一个特定于移动设备的问题。我以前遇到过这个问题。一般来说，移动浏览器，尤其是较旧的浏览器，会限制使用固定定位，因为它会占用屏幕上的太多空间。

http://bradfrost.com/blog/mobile/fixed-position/

【讨论】：

我在 iPhone 6 的设备仿真模式下使用 Google Chrome 时遇到了这个问题（它也发生在 google chrome 上的所有其他设备上），但是谢谢，我会检查这个链接！

所指的文章是在 2011 年发布的。即使这个答案是在 2016 年发布的，它也已经过时了。是的，仍然有一些移动浏览器无法处理它（非常旧，尤其是 Opera Mini），但 Opera Mini 和其他此类用户必须习惯于在狂野的网络上获得相当糟糕的体验。查看 caniuse.com 了解当前（以及在某种程度上是历史）情况。

我不知道为什么你的票数如此之低。我的“高科技”iPhone + 最后一个 ios chrome 无法正确处理position:fixed;，我正在到处寻找解决方案，但没有找到任何可靠的解决方案。是的，我们在 2018 年。