Css 根据浏览器的不同，固定位置按钮出现在不正确的区域

我正在尝试创建一个简单的html站点：

问题在于按钮，它们是png的，我正试图使用css将其定位在背景图像的各个区域上，如下所示：

.but1 {
    opacity:0;
    filter:alpha(opacity=0);
    position:fixed;
    top:463px;
    left:36px;
}

<div class="but but1">
<div class="but but2">

.but { position: absolute; }
.but1 { top: 463px; left: 36px; }

然而，我注意到在不同的浏览器中，根据缩放因子的不同，按钮可能会偏离其预期目标。如果您对此有任何建议，我们将不胜感激，

---

谢谢

将您的

.content

容器设置为

位置：相对

，并将每个按钮div从

位置：固定

更改为

位置：绝对

。容器上的相对位置将使绝对位置相对于div，而不是浏览器

.content {
    padding: 10px 0;
    background-color: #5a5958;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

我可能会为每个类添加另一个类，因此您可以执行以下操作：

.but1 {
    opacity:0;
    filter:alpha(opacity=0);
    position:fixed;
    top:463px;
    left:36px;
}

<div class="but but1">
<div class="but but2">

.but { position: absolute; }
.but1 { top: 463px; left: 36px; }

.但是{位置：绝对；}
.but1{顶部：463px；左侧：36px；}

可能会有所帮助，它包含所有浏览器的默认CSS。确保在主CSS之前包含它。很抱歉，因为另一个答案指出，问题在于您是相对于浏览器窗口定位的，而不是相对于父元素定位的。

谢谢，这两个都解决了问题