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

Question

我正在尝试制作一个简单的html网站：

http://www.williamcharlesriding.com/test/index3.html

问题是按钮，这是png的，我试图定位在背景图像的各个区域，使用这样的css：

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

但是我注意到在不同的浏览器中，根据缩放系数，按钮可能会偏离预期的标记。对此有任何建议将不胜感激， 感谢

Answer 1

将.content容器设置为position: relative，并将每个按钮div从position: fixed更改为position: absolute。容器上的相对位置将构成相对于div的绝对位置，而不是浏览器。

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

我可能会为每个添加另一个类，所以你可以这样做：

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

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

Answer 2

Normalize.css可能会有所帮助，它包含所有浏览器的默认CSS。请务必将其包含在主CSS之前。抱歉，正如另一个答案所述，问题是您相对于浏览器窗口而不是父元素进行定位。