I recently added a fixed button to the bottom right corner of my div. Now, I wanted to incorporate a sidebar that slides out on hover and contains a menu. However, when the sidebar is activated through a button click on mobile devices, the fixed button goes off-screen and reappears alongside the sidebar. The sidebar is absolutely positioned within the parent div.
Why does the fixed button move along with the absolute sidebar on mobile devices?
This is an excerpt from 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>