固定位置无法正常工作

路易斯·米蒂迪耶罗(Luiz Mitidiero)

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

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

谢谢,路易斯

利特尔

这里的问题在于您的.content-container包装器类,该类的CSS声明为webkit-transform: translate3d(0,0,0)正如这个答案所说明的transform声明将定位上下文从视口更改为旋转的元素,这实质上意味着您的fixed元素的行为就好像它是绝对定位的一样。这是一个示例,该示例显示了transform内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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档