绝对定位内部相对定位

Question

我对我的短代码有一点小问题。Here你会找到我的网站。

它只是一个上面有按钮的图像。我的问题是，现在当我想要缩放浏览器窗口时，按钮会移动。因此，按钮将在不同的浏览器、计算机、手机上的任何其他地方...

这是我的代码：

<center>

<div style="position: relative; left: 0; top: 0;">
  <img src="/images/home2.png" style="position: relative; bottom: 0; left: 0;"/>
    <div style="position: absolute; right: 300; bottom: 250;">
      <a href="http://www.pugganagga.com/"><img src=" /images/button.gif " onmouseover="this.src='  /images/button2.gif '" onmouseout="this.src='  /images/button.gif '"  /></a>
    </div>
</div>

</center>

Answer 1

试试这个：

<div style="position: relative; left: 0; top: 0; margin: 0 auto; width:892px">
  <img src="/images/home2.png" style="position: relative; bottom: 0; left: 0;">
  <div style="position: absolute; right: -145px; bottom: 250;">
    <a href="http://www.pugganagga.com/"><img src="  /images/button.gif " onmouseover="this.src='  /images/button2.gif '" onmouseout="this.src='  /images/button.gif '"></a>
  </div>
</div>

Answer 2

问题是，你的div是浏览器窗口的全宽，position: absolute应用于你的div的全宽而不是你的图像的宽度。此外，您应该将样式导出到外部.css文件，内联.css不是最好的技术。

以下是您应该更改的内容

<div style="position: relative;background: url(/images/home2.png);width: 800px;height: 800px;">
    <div style="position: absolute; right: 30px; bottom: 125px;">
    <a href="http://www.pugganagga.com/"><img src="  /images/button.gif " onmouseover="this.src='  /images/button2.gif '" onmouseout="this.src='  /images/button.gif '">
    </a>
</div>

​

编辑：

下面是使用CSS实现所需功能的更好方法

HTML

<div class="container">
    <div class="button">
    <a href="http://www.pugganagga.com/"><img src="  /images/button.gif " onmouseover="this.src='  /images/button2.gif '" onmouseout="this.src='  /images/button.gif '">
    </a>
</div>

​

CSS

.container{
   position: relative;
   background: url(/images/home2.png);
   width: 800px;
   height: 800px;
   margin-left: auto;
   margin-right: auto;
}
.button{
  position: absolute;
  right: 30px;
  bottom: 125px;
}

Answer 3

这可以是其中一个选项。这将把图像固定在一个固定的位置。试试这个。

<div style="position: fixed; left: 0; top: 0;">   

<img src="/images/home2.png" style="position: fixed; left: 453; top: 449;"/>
<div style="position: absolute; right: 300; bottom: 250;">