Html 定位图像

所以，我试着这样做：

该网页应该看起来像一个手机应用程序，而且必须具有响应能力。问题是我不能正确定位按钮。每当我调整浏览器窗口的大小时，它们总是相对于“平板电脑”移动。这是我尝试过的（仅使用一个按钮）：

CSS

HTML

---

我只想让按钮粘在平板电脑上。即使我正在调整浏览器窗口的大小。有没有更简单的方法？谢谢。

是的，无论何时调整浏览器的大小，图像都会改变对齐方式，这是浏览器的默认行为。只有您可以使此图像浮动

试试这个：

img{
  float: left;
}

---

关于上述原始问题：

尝试将

内容
div的
位置设置为
绝对
，
固定
，或
相对

这将确保包含在其中的绝对定位的
按钮
div将其用作参考点，而不是将其调整大小/重新定位到窗口

演示：

关于您在下面的评论：

这是可行的，但在一定程度上是可行的。有一点是，如果您继续扩展浏览器窗口，平板电脑将继续扩展，但按钮不会。这是一个例子

问题在于，您的图像只有96像素宽，并且您已经为所有
img
元素设置了CSS规则，使其具有
最大宽度：100%
。在这些条件下，图像将仅扩展到其原始大小（默认操作，而不是您想要的），并且仅扩展到其包含元素的位置（根据CSS规则，并且没有明显效果）

为了校正，理想情况下，你会得到一个更大的图像。要快速修复，请将其规则更改为简单的
width:100%
。这将确保图像始终扩展到其包含元素的点
 到目前为止，你在FIDDLE上写了什么代码？@surajrawat这是所有相关的代码。对不起，这到底有什么帮助？看起来应该可以。当我回到我的电脑前，我会尝试一下。谢谢你为我创建了这个例子。这是可行的，但在一定程度上是可行的。有一点是，如果您继续扩展浏览器窗口，平板电脑将继续扩展，但按钮不会。这里有一个网页链接，您可以自己查看：谢谢您的后续关注。我在上面的回答中加了一句。希望它能起作用并解释一些事情（如果有，请投票并勾选）。干杯，非常感谢宽度：100%；'工作完美。我想我得设计一个更大的按钮。遗憾的是，我还不能投票，但我勾选了你的答案：）。
<div id="content">
    <div id="tablet">
        <img id="tabletBG" src="images/tablet.png" alt="tabletBG"></img>
        <div id="buttons">
            <img id="quienes" src="images/quienes.png" alt="quienes"></img>
        </div>
    </div>

</div>

img{
  float: left;
}