窗口右側的元素重疊在窗口調整大小

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