Html 需要将图像固定到页面上的特定位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12360973/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Need to fix an image to a specific spot on a page
提问by user1661415
I need to fix a .gif image to a specific spot on my home page. I've placed the image in my HTML, and "position:fixed" doesn't do what I want - the rest of the page's content scrolls beneath the image. I want the image to stay in the same place at all times.
我需要将 .gif 图像修复到我主页上的特定位置。我已将图像放在我的 HTML 中，而“position:fixed”并没有达到我想要的效果——页面的其余内容滚动到图像下方。我希望图像始终保持在同一个位置。
Disclaimer: I know next to nothing about HTML & CSS, so my apologies if this is a very simple question. I've done research, but nothing I've tried seems to work.
免责声明：我对 HTML 和 CSS 几乎一无所知，所以如果这是一个非常简单的问题，我深表歉意。我已经做了研究，但我尝试过的一切似乎都不起作用。
On a related note, my image changes size depending on what browser I'm viewing my site in. I read here in answer to another question that you can remedy that by using percentages instead of pixels to format your object, but I tried that and the problem remains.
在相关说明中，我的图像大小取决于我正在查看我的网站的浏览器。我在这里阅读了另一个问题的答案，您可以通过使用百分比而不是像素来设置对象格式来解决这个问题，但我尝试过并且问题依然存在。
Other notes: I use Chrome as my browser and am building my site using Weebly. My website address is http://www.designartistree.com/and the image in question the ribbon in the middle of the page beneath the large "Design Artistree" logo.
其他说明：我使用 Chrome 作为浏览器，并使用 Weebly 构建我的网站。我的网站地址是http://www.designartistree.com/，有问题的图像位于页面中间的“Design Artistree”大徽标下方的功能区。
Any beginner-friendly advice would be greatly appreciated! Thank you!
任何对初学者友好的建议将不胜感激！谢谢！
Here's the html code that I have for the image:
这是我的图像的 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">
回答by Oriol
If you use position:fixed, the element is positioned relatively to the window, so even if you scroll, the element doesn't move.
如果使用position:fixed，则元素相对于窗口定位，因此即使滚动，元素也不会移动。
If you want it to move when you scroll, use position:absolute.
如果您希望它在滚动时移动，请使用position:absolute。
But because of your layout, you have 2 options:
但是由于您的布局，您有两个选择：
- Place the image inside
#box - Remove the following code:
- 把图片放在里面
#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%;
}
