固定按钮在移动设备上与绝对侧边栏一起移动

Question

我添加了一个固定在div右下角的按钮。现在我想添加一个侧边栏，它会在悬停时移出并包含一个菜单。固定按钮现在不在屏幕上，并在通过单击移动设备上的按钮激活侧边栏时移入。侧边栏是父级 div.

中的绝对位置

为什么固定按钮在移动设备上会随着绝对侧边栏一起移动？

我的css:

.float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 20px;
  background-color: #F45866;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
}

.my-float {
  margin-top: 22px;
}

.sidebar {
  position: absolute;
  padding: 5px;
  right: -130px;
  transition: 0.3s;
  width: 150px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 25px 0 0 25px;
  background-color: #004687;
  height: 46px;
}

.sidebar:hover {
  right: -20px;
}

<div class="floatingbutton">
  <i class="my-float float">+</i>
</div>

<div class="sidebar">
  Test
</div>

Answer 1

在移动设备上，“折叠”时侧边栏会向右移动，使 html 主体比屏幕宽。由于按钮位于 absolute 位置，因此该位置也在屏幕之外。（可能比你想要的多 130 像素）。

您可能希望为 body 设置一个固定值。

Answer 2

固定按钮正在移动，因为侧边栏使正文在折叠时变宽和变小。解决方案是将 overflow-x 设置为隐藏在容器中。

固定按钮在移动设备上与绝对侧边栏一起移动

Fixed button moving along with absolute sidebar on mobile

html

css

fixed

absolute