Html 如何在重新调整web浏览器大小时防止按钮移动

这是我的网站的图片按钮。当我重新调整浏览器的大小时，它会显示在这里

这是我的密码

HTML

<div class="Nav">
    <div id="buttons">
        <a href="/"><div id="home_button"></div></a>

---

请记住，我是css和html新手，请不要讨厌

你不应该使用绝对位置。将其更改为

位置：相对或<代码>位置：静态绝对定位导致按钮从浏览器窗口边缘移动坐标（顶部：196px；左侧：502px；）

我建议也研究一下
float
属性，因为它在定位事物时非常有用，这样它们可以很好地流动，特别是对于。你真的应该尝试使用列表进行导航。在这里，我做了一个简单的例子。此外，您可以使用CSS轻松地重新创建按钮。因此无需使用背景图像

.nav容器{
背景：#CCC；
宽度：80%；
位置：相对位置；
左边距：自动；
右边距：自动；
}
.导航{
填充：10px；
}
.导航项目{
显示：内联块；
填充：10px；
背景：线性梯度（#68B6E7，#3349D3）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr=#68B6E7，endColorstr=#3349D3）；
-ms过滤器：“progid:DXImageTransform.Microsoft.gradient（startColorstr=#68B6E7，endColorstr=#3349D3）”；
字体系列：Verdana，无衬线；
边框：2倍实心#000；
边界半径：4px；
}
.资产净值项目a{
文字装饰：无；
颜色：#000；
}

免责声明线性渐变不适用于IE8和IE9

过滤器：

和

-ms过滤器：

应涵盖这一点。（我已将其添加到CSS中，以防万一）

#home_button {
background-image: url("home.png");
background-repeat:no-repeat;
background-size: 100%;
width: 150px;
height: 60px;
position: absolute;
top: 196px;
left: 502px;
z-index: 10;
}