我的问题非常简单.我正在开发一个关于移动版本的页面,我们希望将“阻碍”黄色按钮固定在底部,但是固定的位置不起作用,它的工作方式绝对位置,我不知道为什么.
@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声明.