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的全宽，而不适用于图片的宽度。此外，您应该将样式导出到extern .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;">

Answer 4

此代码存在很多问题：）

首先，您不需要在left: 0的元素上设置top: 0或position:relative;。当你在相对位置上使用坐标时，它意味着：继续当前位置顶部的XXpx。 所以当你输0时，你的意思是：留在你现在的位置。

然后，我清理了你的代码：

<body background="http://www.pugganagga.com/images/giftly.png" text="#990000" link="#0000CC" vlink="#000066" alink="#000000">     
<div style="width: 800px; margin: 10px auto; position: relative; ">
  <img src="/images/home2.png" >
    <div style="position: absolute; right: 50px; bottom: 250px;">
      <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>
</body>

我删除了过时的center标记，删除了无用的`position：relative＆＃39;和用于坐标的单位（200px而不是200，如在CSS中，它没有任何意义）。

绝对定位内部相对定位

4 个答案: