Fixed button moving along with absolute sidebar on mobile

Question

I added a button fixed to the right bottom corner of the div. Now I wanted to add a sidebar, which moves out on hovering and includes a menu. The fixed button now is out of screen, and moves in when the sidebar is activated through a button click on mobile devices. The sidebar is absolute places within the parent div.

Why is the fixed button moving along with the absolute sidebar on mobile devices?

My 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

The fixed button was moving since the sidebar made the body wider and smaller on collapsing. The solution was to set overflow-x to hidden in the container.