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

Question

我需要将.gif图像修复到我主页上的特定位置.我已经将图像放在我的HTML中了,"position:fixed"没有按照我想要的方式进行 - 页面内容的其余部分滚动到图像下方.我希望图像始终保持在同一个地方.

免责声明:我对HTML和CSS几乎一无所知,所以如果这是一个非常简单的问题我很抱歉.我做过研究,但我尝试过的任何东西似乎都没有用.

在相关的说明中,我的图像会根据我正在查看我的网站的浏览器而改变大小.我在这里阅读了另一个问题,您可以通过使用百分比而不是像素来格式化您的对象,但我尝试了问题依然存在.

其他说明:我使用Chrome作为浏览器,并使用Weebly构建我的网站.我的网站地址是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">

Answer 1

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

如果要在滚动时移动它,请使用position:absolute.

但由于您的布局,您有两个选择:

• 将图像放在里面 #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%;
}