css – 固定不工作的位置像绝对一样工作

前端之家收集整理的这篇文章主要介绍了css – 固定不工作的位置像绝对一样工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的问题非常简单.我正在开发一个关于移动版本的页面,我们希望将“阻碍”黄色按钮固定在底部,但是固定的位置不起作用,它的工作方式绝对位置,我不知道为什么. @H_301_2@我正在工作的页面https://www.thechivery.com/products/everything-is-j-ok-tee

@H_301_2@谢谢,
路易斯

解决方法

这里的问题在于你的.content-container包装器类,它有一个CSSkit声明的webkit-transform:translate3d(0,0).变换声明(如 this answer illustrates)将定位上下文从视口更改为旋转元素,这实际上意味着固定元素的行为就像绝对定位一样.这是一个示例,显示了转换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;
  }
<html>
  <body>
<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>
</body>
</html>
@H_301_2@为了使一切工作,您需要从.content-container中删除transform3d声明.

猜你在找的CSS相关文章