Html 固定按钮移动与绝对侧边栏上的移动

我在div的右下角添加了一个按钮。现在我想添加一个侧栏，它在悬停时向外移动，并包含一个菜单。固定按钮现在不在屏幕上，当侧边栏通过移动设备上的按钮点击激活时，固定按钮将移入屏幕。侧边栏是父div中的绝对位置

为什么移动设备上的固定按钮与绝对侧边栏一起移动

我的css：

.float{
位置：固定；
宽度：60px；
高度：60px；
底部：40px；
右：20px；
背景色：#F45866；
颜色：#FFF；
边界半径：50px；
文本对齐：居中；
盒影：2盒2盒3盒999；
}
.我的花车{
边缘顶部：22px；
}
.侧边栏{
位置：绝对位置；
填充物：5px；
右：-130px；
过渡：0.3s；
宽度：150px；
文字装饰：无；
字体大小：20px；
颜色：白色；
边界半径：25px 0 0 25px；
背景色：#004687；
高度：46px；
}
.侧边栏：悬停{
右：-20px；
}

+
试验

在手机上，侧边栏在“折叠”时向右移动，使html正文比屏幕宽。由于按钮位于

绝对位置

上，因此该位置也在屏幕之外。（右边可能比您想要的多130像素）

---

您可能希望为

主体设置一个固定按钮
固定按钮正在移动，因为侧边栏使主体在折叠时变宽变小。解决方案是将overflow-x设置为隐藏在容器中。
我理解为什么它现在不在屏幕上，谢谢。但在应用固定宽度后，固定按钮位于屏幕中，但仍沿边栏移动到屏幕中间。知道为什么吗？@kouwschottel您可能想设置页面的
溢出
属性。