Question

我的问题非常简单。我正在开发一个关于移动版的页面，我们希望将“阻碍”黄色按钮固定在底部，但是固定的位置不起作用，它的工作方式绝对是位置，我不知道为什么。

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

谢谢，路易斯

Answer 1

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

＆＃13;

.rotate {
  transform: rotate(30deg);
  background: blue;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.fixed {
  position: fixed;
  background: red;
  padding: 10px;
  color: white;
  top: 50px;
}

＆＃13;

<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>

＆＃13;

为了让一切顺利进行，您需要从transform3d删除.content-container声明。

Answer 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。

Answer 3

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

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

将两个属性分开可以解决此问题。

Answer 4

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

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

固定不起作用的位置就像绝对一样

4 个答案: