Html 绝对定位内相对定位_Html_Css_Css Position

Html 绝对定位内相对定位

html css

Html 绝对定位内相对定位,html,css,css-position,Html,Css,Css Position,我的短代码有点问题。您将找到我的网站。这只是一张有按钮的图片。我的问题是，现在当我想缩放浏览器窗口时，按钮会四处移动。因此，按钮将位于不同浏览器、计算机、手机等的任何其他位置这是我的代码： <center> <div style="position: relative; left: 0; top: 0;"> <img src="/images/home2.png" style="position: relative; bottom: 0; left: 0;

我的短代码有点问题。您将找到我的网站。
这只是一张有按钮的图片。我的问题是，现在当我想缩放浏览器窗口时，按钮会四处移动。因此，按钮将位于不同浏览器、计算机、手机等的任何其他位置

这是我的代码：

<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>

试试这个：

<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>

这可能是选项之一。这会将图像固定在固定位置。试试这个

<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;">

问题是，您的

div

是浏览器窗口的全宽，

位置：绝对

适用于

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>

这个代码有很多问题：）
首先，您不需要在具有位置：relative的元素上设置left:0
，或top:0
。当你在相对定位上使用坐标时，它的意思是：在当前位置顶部的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'和坐标使用的单位（200px而不是200，在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;
}

<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>