Html 缩小浏览器时，我的菜单按钮垂直向上移动

我做了一个典型的菜单按钮。但由于某种原因，当我缩小浏览器时，它开始稍微向上移动？可能很简单，但我不知道为什么？这也很烦人

<div id="lines" onClick="return showMenu()" class="btn"></div>


#lines:hover {
  background-color:#a2a2a2;
}

.btn { 
  position: relative;         
  margin-top:2%; 
  border: 2px solid #a5aaaa;
  border-radius: 2px; 
  height: 36px; 
  width:36px;  
  float:right;
  right:20px;
  position:relative;
}

#lines:before { 
  border-bottom: 17px double #a5aaaa;
  border-top: 6px solid #a5aaaa;    
  content:"";
  height: 5px; 
  position: absolute; 
  right:3px;  
  top: 4px; 
  width:30px;   
}

#行：悬停{
背景色：#A2A2；
}
.btn{
位置：相对位置；
利润率最高：2%；
边框：2个实心#a5aaaa；
边界半径：2px；
高度：36px；
宽度：36px；
浮动：对；
右：20px；
位置：相对位置；
}
#行：在{
边框底部：17px双色#a5aaaa；
边框顶部：6px实心#a5aaaa；
内容：“；
高度：5px；
位置：绝对位置；
右：3px；
顶部：4px；
宽度：30px；
}

页边距顶部：0表示.btn

---

您只需将页边距顶部设置为2%，即页面高度的百分比

请尝试将其设置为以下内容：

margin-top:2px; 

或者任何你喜欢的价值

---

您只需要一个静态值，而不是一个动态值，它会在每次重新调整窗口大小时不断计算该值。

这是

边距顶部：2%.btn

的规则中添加code>。

margin-top:2px;