css - 窗口右侧的元素在窗口调整大小时重叠

Question

我在页面的左侧和右侧有两组（jQuery 移动）按钮。当我从左侧缩小窗口时，左侧的一组按钮会按预期移动，在其自身和窗口边框之间保留一些空间。但是当我从右侧缩小时，窗口会与该侧的一组按钮重叠。

我怎样才能避免这种情况？无论我从右侧还是左侧缩小屏幕，我都希望两组按钮都保留它们的百分比水平位置。（当我从底部收缩时，两组按钮都保留了它们与窗口顶部边框之间的空间）。

CSS：

   #mainPage{
position:relative;

}

.subMenuClass{  /* right side */
display: none;
position: absolute;
z-index: 10000;
top: 2%;
left:85%;

}

 .mainMenuClass{      /*left side*/
display: none;
z-index: 10000;
position:absolute;
top: 2%;
left: 5%;

}

Answer 1

.subMenuClass{  /* right side */
display: none;
position: absolute;
z-index: 10000;
top: 2%;
right:5%; /*change to this,you may need to adjust the value*/
}