我的问题非常简单.我正在开发一个关于移动版本的页面,我们希望将“阻碍”黄色按钮固定在底部,但是固定的位置不起作用,它的工作方式绝对位置,我不知道为什么.
我正在工作的页面：https://www.thechivery.com/products/everything-is-j-ok-tee
谢谢,
路易斯
解决方法
这里的问题在于你的.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>
为了使一切工作,您需要从.content-container中删除transform3d声明.
