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

Question

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

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

谢谢,路易斯

Answer 1

这里的问题在于你的.content-container包装类,它有一个CSS声明webkit-transform: translate3d(0,0,0).正如此答案所示,转换声明将定位上下文从视口更改为旋转元素,这实际上意味着您的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>

为了使一切工作,您需要从中删除transform3d声明.content-container.

Answer 2

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

也position: fixed变得不仅打破transform，但也filter和perspective财产穿上任何始祖为解释在这里。

请参阅：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有关此问题的更多信息。