需要将图像固定到页面上的特定位置

我需要将 .gif 图像修复到主页上的特定位置。我已将图像放入 HTML 中，但“position:fixed”并没有执行我想要的操作 - 页面内容的其余部分在图像下方滚动。我希望图像始终保持在同一个位置。

免责声明：我对 HTML 和 CSS 几乎一无所知，所以如果这是一个非常简单的问题，我很抱歉。我做过研究，但我所做的一切似乎都不起作用。

与此相关的是，我的图像会根据我正在使用的浏览器查看网站而改变大小。我在这里阅读了另一个问题的答案，您可以通过使用百分比而不是像素来格式化对象来解决这个问题，但我尝试了这一点并且问题仍然存在。

其他说明：我使用 Chrome 作为浏览器，并使用 Weebly 构建我的网站。我的网站地址是http://www.designartistree.com/ http://www.designartistree.com/相关图像位于页面中间的丝带，位于大型“Design Artistree”徽标下方。

任何适合初学者的建议将不胜感激！谢谢你！

这是我的图像的 html 代码：

<img src="/files/theme/ribbon.gif" alt="ribbon" style="position:fixed; margin-left:27.6%; margin-top:61%; width:63.7%; height:10%; z-index:50; visibility:show">

如果你使用position:fixed，元素相对于窗口定位，因此即使滚动，元素也不会移动。

如果您希望它在滚动时移动，请使用position:absolute.

但由于您的布局，您有 2 个选择：

• 将图像放入其中#box
• 删除以下代码：

html{
    overflow:hidden;
    height: 100%;
    max-height: 100%;
}
body {
    height: 100%;
    max-height: 100%;
    width: 100%;
}
#box {
    height: 100%;
    max-height: 100%;
    overflow: auto;
    width: 100%;
}