位置固定不工作是绝对的工作 [英] Position fixed not working is working like absolute

查看:124
本文介绍了位置固定不工作是绝对的工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的问题很简单。我在一个页面上的移动版本,我们想保持钩住黄色按钮固定在底部,但位置固定不工作,它的工作像位置绝对,我不知道为什么。



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



感谢,
Luiz

解决方案

这里的问题在于你的 .content-container 包装类, of webkit-transform:translate3d(0,0,0)。变量声明,如此答案说明了< a>,将定位上下文从视口更改为已旋转的元素,这实质上意味着您的固定元素的行为就像是绝对定位。这里是一个例子,显示一个固定的元素之间的变化的 div 和固定元素之外的 div 。 / p>

  .rotate {transform:rotate(30deg);背景:蓝色; 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>我固定在旋转的div内。< / div>< / div> < div class =fixed>我固定在旋转的div之外。< / div>< / body>< / html>  

b
$ b

为了一切正常,您需要从 .content-container中删除 transform3d 声明


my question is pretty simple. I'm working on a page on mobile version, and we want to keep the "snag it" yellow button fixed on bottom, but position fixed is not working, it's working like position absolute and i don't know why.

The page i'm working: https://www.thechivery.com/products/everything-is-j-ok-tee

Thanks, Luiz

解决方案

The issue here lies with your .content-container wrapper class, which has a CSS declaration of webkit-transform: translate3d(0,0,0). The transform declaration, as this answer illustrates, changes the positioning context from the viewport to the rotated element, which essentially means that your fixed element behaves as if it were absolutely positioned. Here's an example showing the difference between a fixed element inside a transformed div and a fixed element outside of that 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>

In order for everything to work, you'll need to remove the transform3d declaration from .content-container.

这篇关于位置固定不工作是绝对的工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆