位置固定不工作是绝对的工作 [英] Position fixed not working is working like absolute
问题描述
我的问题很简单。我在一个页面上的移动版本,我们想保持钩住黄色按钮固定在底部,但位置固定不工作,它的工作像位置绝对,我不知道为什么。
我正在使用的网页: https:/ /www.thechivery.com/products/everything-is-j-ok-tee
感谢,
Luiz
这里的问题在于你的 b 为了一切正常,您需要从 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
In order for everything to work, you'll need to remove the 这篇关于位置固定不工作是绝对的工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! .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 .content-container中删除
。 transform3d
声明.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>
transform3d
declaration from .content-container
.