需要将图像固定到页面上的特定位置 [英] Need to fix an image to a specific spot on a page

问题描述

我需要将.gif图像固定到主页上的特定位置。我已将图片放置在HTML中，而 position：fixed并不能满足我的要求-页面的其余内容会在图片下方滚动。我希望图像始终保持在同一位置。

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.

免责声明：我对HTML&几乎一无所知。 CSS，所以我很抱歉，如果这是一个非常简单的问题。我已经进行了研究，但没有尝试过。

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.

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

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.

其他说明：我使用Chrome作为浏览器，并使用Weebly构建网站。我的网站地址为 http://www.designartistree.com/ ，相关图片位于中间

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.

任何对初学者友好的建议将不胜感激！谢谢！

Any beginner-friendly advice would be greatly appreciated! Thank you!

这是我在图像上使用的html代码：

Here's the html code that I have for the image:

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

推荐答案

如果使用位置：固定，该元素相对于窗口定位，因此即使滚动，该元素也不会移动。

If you use position:fixed, the element is positioned relatively to the window, so even if you scroll, the element doesn't move.

如果需要要滚动时要移动，请使用 position：absolute 。

If you want it to move when you scroll, use position:absolute.

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

But because of your layout, you have 2 options:

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

这篇关于需要将图像固定到页面上的特定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！