试图让一些“按钮”随动态背景图像一起移动。到目前为止，背景图像确实调整了大小。许多按钮(包含工具提示和链接)的相对定位也有效......部分......将它们从左到右移动相对百分比，但不是从上到下移动。在垂直方向上，按钮只是堆叠并停留在那个位置。目标是让按钮靠近图像上的相同位置，无论它是什么尺寸。我错过了什么？我不了解父/子流程吗？编码错误？
CSS ---
html {
background: url(img/tundrabiome.jpg) no-repeat center center fixed;
background-size: cover;
}
body {
font-family: helvetica, "times new roman", sans-serif;
font-size: 12px;
width:100%;
height: 100%;
}
#titleBtn {position: relative; top: 30%; left: 34%; background: url(img/tundratitle.png) no-repeat; width:379px; height:127px;}
#bearBtn {display: inline-block; position: relative; top: 65%; left: 24%; background: url(img/bearBtn.png) no-repeat; width:200px; height:200px;}
HTML
<html>
<body>
<a href="#" class="tooltip">
<div id="titleBtn">
<span style="margin-top:120px; margin-left:30px">
<strong>Tundra Biome</strong><br />
Lots of really cold information of life in an arctic tundra. Lots of really cold information of life in an arctic tundra. Lots of really cold information of life in an arctic tundra.
</span>
</div>
</a>
<a href="#" class="tooltip">
<div id="bearBtn">
<span style="margin-top:-30px; margin-left:-50px">
<strong>Bear</strong><br />
This is a really cute bear, isn't it?
</span>
</div>
</a>
我真的可以让“按钮”相对于背景图像(并保留按钮上的工具提示和链接吗？)还是我必须返回到所有内容的绝对位置？
最佳答案
是否有理由不使用绝对定位？
您不需要对所有内容进行绝对定位，但您可以考虑对按钮本身使用绝对定位。
'Absolute' 命名不当...当一个元素设置为 absolute 时，它将相对于具有指定“position”属性的最接近的父项绝对定位。将按钮的父级设置为“静态”，然后相对于该“静态”父级将按钮设置为“绝对”。这有点令人困惑，因为默认情况下父级是“静态”的，但实际上将其指定为“静态”使得可以使用“绝对”将其子级锚定到它。 (您也可以将父级设置为“相对”或“绝对”。只要将其设置为 -something-，它就会成为“绝对”子级所锚定的对象。)
关于html - 相对父级的 CSS 相对定位高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25965791/