Question

试图获得一些＆＃34;按钮＆＃34;使用动态背景图像移动。到目前为止，背景图像确实调整了大小。相对定位许多按钮（包含工具提示和链接）也可以工作....部分...从左到右移动它们相对百分比，但不是从上到下移动它们。垂直方向，按钮只是堆叠并保持在该位置。目标是让按钮保持接近图像上的相同位置，无论它的大小。我错过了什么？我不理解父/子流吗？编码错了吗？

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>

我真的可以拥有＆＃34;按钮＆＃34;相对于背景图像（并保持按钮上的工具提示和链接？）或者我是否必须回到绝对位置？

Answer 1

有没有理由不使用绝对定位？

您不需要绝对的位置，但您可以考虑对按钮本身使用绝对定位。

'绝对'命名不佳......当一个项目设置为绝对时，它将相对于其指定了“position”属性的最近父级绝对定位。将按钮的父级设置为“静态”，然后将“绝对”按钮设置为相对于“静态”父级。这有点令人困惑，因为默认情况下父级是“静态的”，但实际上将其指定为“静态”可以使用'absolute'将其子级锚定到它。（你也可以将父设置为'relative'或'absolute'。只要你将它设置为-something-，就会成为'绝对'孩子被锚定的东西。）

CSS相对定位高度到相对父级

1 个答案: