窗口右侧的元素重叠在窗口大小调整上

Question

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

我该如何避免这种情况？无论我是从右侧还是左侧缩小屏幕，我都希望两组按钮保持其水平位置百分比。 （当我从底部收缩时，两组按钮都会从窗口的顶部边框保留其空间。）

的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*/
}